例如,对散布运算符的正确用法看起来像
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
我的问题是:
如果实际上尝试在控制台中执行此操作,则会收到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));