使用ES6解構函數參數時如何傳遞根物件？

在ES6 解構函數參數中命名根物件

ES6 提供解構作為一種從物件和陣列中提取屬性到變數的簡潔方法。然而，在解構函數參數時保留根物件的名稱可能會變得具有挑戰性。

ES5 繼承隱喻

在ES5 中，您可以傳遞整個選項物件將繼承鏈「向上」到父類，允許其存取所有參數：

// ES5:
var setupParentClass5 = function(options) {
    textEditor.setup(options.rows, options.columns);
};

var setupChildClass5 = function(options) {
    rangeSlider.setup(options.minVal, options.maxVal);
    setupParentClass5(options); // pass the options object UP
};

ES6 解構

使用ES6 解構，提取特定參數變得更容易方便：

// ES6:
var setupParentClass6 = ({rows, columns}) => {
    textEditor.setup(rows, columns);
};

var setupChildClass6 = ({minVal, maxVal}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6( /* ??? */ );  // how to pass the root options object?
};

選項：單獨提取或根物件傳遞

一個選項是在setupChildClass6() 中單獨提取每個選項，然後將它們傳遞給setupParentClass6 ()。然而，這種方法可能會因為參數過多而變得冗長：

// ugh.
var setupChildClass6b = ({minVal, maxVal, rows, columns}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6({rows, columns});
};

使用臨時變數

更簡潔的解決方案是使用臨時變數來在儲存根將選項物件傳遞給setupParentClass6() 之前：

const setupChildClass6 = options => {
    const {minVal, maxVal} = options;
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options);
};

此方法可讓您解構setupChildClass6() 中所需的特定參數，同時仍將整個選項物件傳遞給setupParentClass6()。

以上是使用ES6解構函數參數時如何傳遞根物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！