ES6解构函数参数-命名根对象

IT技术 javascript function arguments ecmascript-6 destructuring
2021-01-23 00:51:05

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

在 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个回答

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

const setupChildClass6 = options => {
    const {minVal, maxVal} = options;
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options); 
};
同意——这也是我一直在使用的。在过去的几个月里，我们都学会了更好地使用 es6！
2021-03-25 00:51:05

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

function myFun(allVals) {
    const { val1, val2, val3 } = allVals;
    console.log("easy access to individual entries:", val2);
    console.log("easy access to all entries:", allVals);
}
哦，但这可能取决于他想对他们做什么，你不觉得吗？
2021-03-16 00:51:05
好吧，有很多人认为这const应该是默认设置。当然，如果你想重新分配，你需要let.
2021-03-28 00:51:05
更好的是，你可以const在这里使用:-)
2021-04-06 00:51:05
这是真的。如果这是您的问题，您可以添加 JSDoc。或者你可以做相反的事情（解构 args 然后在下面重构它们），但它有点冗长，你必须重复每个 vars 两次。
2021-04-08 00:51:05
tl;博士可怜的智能。这种方法的问题是在使用 myFun 时你不会有 allVals 结构的任何指示
2021-04-10 00:51:05

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

  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。

你能详细说明为什么以及使用参数会减慢函数的速度吗？
2021-03-18 00:51:05
arguments#2 中所示的使用实际上并不慢。但我认为它不可读。
2021-04-01 00:51:05
谢谢，超级有帮助。实际上#2 最接近意图，考虑到函数的使用方式，减速将无关紧要。目前，我正在使用 Babel，所以它可能很快就会在对象上获得 rest 属性。
2021-04-03 00:51:05
Rest 属性可能无法解决您的问题，因为它确实会从对象中取出minVal和maxVal取出options。谨防。
2021-04-11 00:51:05
如果我在箭头函数中使用方法 2，我会得到“参数未定义”我认为你不能arguments在箭头函数中使用，是吗？
2021-04-11 00:51:05

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

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

var setupChildClass6 = options => (({minVal, maxVal}) => {
    rangeSlider.setup(minVal, maxVal);
    setupParentClass6(options);
})(options);
谢谢！在我们休息和传播之前，我在 ES6 的早期写了我的原始问题。现在我们这样做了，我按照上面 Alex 给出的答案的风格编写代码（示例 3）
2021-04-01 00:51:05
其它你可能感兴趣的问题
上一篇为什么 javascript 对象在 Chrome、Firefox、Safari 的控制台中显示不同的值？ 下一篇是否有充分的理由将字符串传递给 setTimeout？