小编典典

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

阅读 229

收藏
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