javascript - ES6 扩展运算符在对象上的应用是标准的 ECMAScript 规范吗？

Question

MDN defines展开运算符的用法仅适用于数组。

例如，展开运算符的正确用法如下所示

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

我们在 array parts 上应用了展开运算符。

但是in the React docs ，他们像这样在对象上使用展开运算符

var props = {}; 
props.foo = x; 
props.bar = y; 
var component = <Component {...props} />;

如果我真的尝试在控制台中执行此操作，我会收到 TypeError

var a = {b:1,c:2}
console.log(...a);  // TypeError

我的问题是:

• 在对象上使用扩展运算符是否是规范中实现的标准(并且 MDN 文档以某种方式省略了这个用例，我试图展示的控制台示例没有正确完成，因此出现了 TypeError)？
• 如果不是标准实现，那么幕后发生的事情允许 React 组件巧妙地处理传播运算符以其执行的非标准方法(即作用于对象)执行操作，并抑制可能会出现的 TypeError这样做时不可避免地会出现？

Answer 1

If I actually try to do this in the console, I receive a TypeError

你在这里混淆了一些东西(如果它们看起来都很相似，就不能怪你)。

在你的例子中，

console.log(...a);

...a 不是对象传播的应用。它有时被称为 spread syntax (尽管这个具体并没有真正的名字)，这是在 ES2015 中标准化的。它在函数调用中用作最后一个“参数”，并且仅适用于iterables。对象不是可迭代对象，因此会出现错误。

对象传播，目前是 proposal , 仅用于对象字面量:

var foo = {x: 42};
var bar = {y: 21, ...foo}; // equivalent to Object.assign({y: 21}, foo);

what is going on under the hood

里面的用途JSX ( <Component {...props} /> ) 又是一个略有不同的东西，它是一个 JSXSpreadAttribute，但它确实对对象传播进行了脱糖处理。如果你try it out in Babel你可以看到它被转换成什么:

var _extends = Object.assign || /* polyfill */;

React.createElement(Component, _extends({ foo: true }, props));