Question

MDN defines使用扩展运算符作为仅用于数组。

例如，扩展运算符的正确用法类似于

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

我们已在数组 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

我的问题是：

Answer 1

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

你在这里混淆了一些事情（如果它们看起来相似的话，不能责怪你。）

在您的示例中，

console.log(...a);

...a 不是对象传播的应用。它有时被称为spread syntax（尽管这个具体并没有真正的名字），这在ES2015中是标准化的。它在函数调用中用作last＆＃34; argument＆＃34;并且仅适用于 iterables 。对象不是可迭代的，因此您会收到错误。

对象传播，目前是proposal，仅用于对象文字：

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

引擎盖下发生的事情

JSX（<Component {...props} />）内部的使用又是一个稍微不同的东西，它是一个 JSXSpreadAttribute ，但是它确实是对象扩散。如果您try it out in Babel，您可以看到它转换为：

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

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

Answer 2

此时扩展运算符正在标准化，因此不能仅与ES2015一起使用。目前，这是该流程第2阶段的提案，可能会出现在ES2017规范中。

在转换到ES5时，已经可以通过使用一些额外的babel插件来利用它。这就是您提到的样本中使用的内容。