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

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

// 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
};

在ES5 中，您可以傳遞整個選項物件將繼承鏈「向上」到父類，允許其存取所有參數： // ES5: var setupParentClass5 = 函數（選項）{ textEditor.setup(選項.行, 選項.列); }; var setupChildClass5 = 函數（選項）{ rangeSlider.setup(options.minVal, options.maxVal); setupParentClass5（選項）； // 傳遞選項物件 UP };

// 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: var setupParentClass6 = ({行, 列}) => { textEditor.setup(行、列); }; var setupChildClass6 = ({minVal, maxVal}) => { rangeSlider.setup(minVal, maxVal); setupParentClass6( /* ??? */ ); // 如何傳遞根選項物件？ };

// 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
};

一個選項是在setupChildClass6() 中單獨提取每個選項，然後將它們傳遞給setupParentClass6() 。然而，這種方法可能會因為參數較多而變得冗長：// 呃。 var setupChildClass6b = ({minVal, maxVal, 行, 列}) => { rangeSlider.setup(minVal, maxVal); setupParentClass6({行, 列}); };

// 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
};

更簡潔的解決方案是使用臨時變數來保存根選項對象，然後將其傳遞給setupParentClass6():

const setupChildClass6 = 選項=> { const {minVal, maxVal} = 選項； rangeSlider.setup(minVal, maxVal); setupParentClass6（選項）； };