28

有没有办法保留解构函数参数的名称？即，根对象的名称？

在 ES5 中，我可能会这样做（使用继承作为比喻来说明这一点）：

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

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

我使用同一个options对象来保存多个配置参数。有些参数是父类使用的，有些是子类使用的。

有没有办法用 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});
};
4

4 回答 4

21

我自己在太多地方都有“选择”论据。我会选择额外的 1 行代码。在这个例子中不值得，但在多行解构时是一个很好的解决方案。

const setupChildClass6 = options => {
    const {minVal, maxVal} = options;
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options); 
};
于 2015-12-07T21:26:44.130 回答
7

您不能直接在参数中执行此操作，但您可以在之后提取值：

function myFun(allVals) {
    const { val1, val2, val3 } = allVals;
    console.log("easy access to individual entries:", val2);
    console.log("easy access to all entries:", allVals);
}
于 2015-10-17T10:49:50.533 回答
6

您不能同时对同一个参数使用解构和简单命名位置参数。你可以做什么：

  1. 对函数使用解构setupParentClass6，但使用旧的 ES6 方法setupChildClass6（我认为这是最好的选择，只是让名称更短）：

    var setupChildClass6 = (o) => {
  rangeSlider.setup(o.minVal, o.maxVal);
  setupParentClass6(o); 
};

  2. 使用旧arguments对象。但是arguments可以减慢功能（特别是V8），所以我认为这是一个不好的方法：

    var setupChildClass6 = ({minVal, maxVal}) => {
  rangeSlider.setup(minVal, maxVal);
  setupParentClass6(arguments[0]); 
};

  3. ES7 有关于rest/spread 属性的建议（如果你不需要minVal并且maxVal在setupParentCalss6函数中）：

    var setupChildClass6b = ({minVal, maxVal, ...rest}) => {
  rangeSlider.setup(minVal, maxVal);
  setupParentClass6(rest);
};

    不幸的是，它不是 ES6。

于 2015-03-14T16:37:18.527 回答
0

这是我能想到的最好的。不是很好，但比在另一条线上进行破坏要好得多（IMO）。它也以某种方式为您提供了一个提示，您将options首先提供，并且您正在函数中解构它......

var setupParentClass6 = options => (({rows, columns}) => {
    textEditor.setup(rows, columns);
})(options);

var setupChildClass6 = options => (({minVal, maxVal}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options);
})(options);
于 2020-06-26T15:20:43.760 回答