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

Posted 2023-02-22

【中文标题】ES6解构函数参数——命名根对象

【英文标题】：ES6 destructuring function parameter - naming root object

【发布时间】：2015-05-17 01:02:44

【问题描述】：

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

在 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);
;

【问题讨论】：

arguments[0] 可以，但是不行，你不能在解构的同时命名它们。

中间对象的命名见Destructuring nested objects: How to get parent and it's children values?

【参考方案1】：

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

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

【讨论】：

同意——这也是我一直在使用的。在过去的几个月里，我们都学会了更好地使用 es6！

【参考方案2】：

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

function myFun(allVals) 
    const  val1, val2, val3  = allVals;
    console.log("easy access to individual entries:", val2);
    console.log("easy access to all entries:", allVals);

【讨论】：

更棒的是，你可以在这里使用const :-)

哦，但这可能取决于他想用它们做什么，你不觉得吗？

很多人认为const 应该是默认值。当然如果你想重新分配，你需要let。

tl;dr 可怜的智能感知。这种方法的问题是，在使用 myFun 时，您不会有任何关于 allVals 结构的指示

确实如此。如果这是您关心的问题，您可以添加 JSDoc。或者你可以做相反的事情（解构 args 然后在下面重组它们），但它有点冗长，你必须重复每个 vars 两次。

【参考方案3】：

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

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

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

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

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

ES7 提出了rest/spread properties（如果你不需要minVal 和maxVal 在setupParentCalss6 函数中）：

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

不幸的是，它不是 ES6。

【讨论】：

谢谢，非常有帮助。实际上＃2最接近意图，考虑到该功能的使用方式，减速将无关紧要。目前，我正在使用 Babel，所以它可能很快就会在对象上获得 rest 属性。

#2中arguments的使用其实并不慢。但我认为它不可读。

Rest 属性可能无法解决您的问题，因为它确实将 minVal 和 maxVal 从 options 对象中取出。当心。

您能否详细说明为什么使用参数会减慢函数的速度以及在多大程度上会减慢函数的速度？

如果我在箭头函数中使用方法 2，我会得到“未定义参数”我认为您不能在箭头函数中使用 arguments，可以吗？

【参考方案4】：

这是我能想到的最好的。不是很好，但比在另一条线上进行破坏要好得多（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）