在 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()。