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

小编典典

reactjs

MDN将散布运算符的用法定义为仅对数组起作用。

例如，对散布运算符的正确用法看起来像

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

我们在数组上应用了散布运算符parts。

但是在React文档中，他们对此类
对象使用了散布运算符

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这样做？

阅读 230

2020-07-22

共1个答案

小编典典

如果实际上尝试在控制台中执行此操作，则会收到TypeError

您在这里有些困惑（如果它们看起来相似，就不能怪您）。

在您的示例中

console.log(...a);

该...a是没有对象传播的应用。它有时被称为 扩展语法
（即使此名称实际上并没有真正的名称），在ES2015中已标准化。它在函数调用中用作最后一个“参数”，并且仅在 可迭代对象上
起作用。对象不是可迭代的，因此会出现错误。

对象传播 ，目前是一个建议，仅用于
对象文字中 ：

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

引擎盖下发生了什么

JSX（<Component {...props} />）内部的用法稍有不同，它是
JSXSpreadAttribute
，但是它确实对对象散布了糖。如果您在Babel中尝试一下，可以看到将其转换为：

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

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

2020-07-22