'...'操作符在React中是不是可以展开对象？

Question

var todo =[
  {
    id:1,
    text:'first'
  },
  {
    id:2,
    text:'second'
  }
];
todo.map(function(item){
  console.log(...item);
});

上面的代码用node运行会出错，也就是js中...操作符不能解析对象，但是我在React中却可以在组件中使用...来解析，例如：

var todo={
  id:1,
  text:'12'
};
<Todo {...todo}>

可以直接赋予组件id和text属性(props)，并且属性值也是对象中对应的值。

Answer 1

...是ES6语法中的解构赋值，只不过React文档中建议开发者使用ES6语法，你安装react的时候应该也安装了babel，建议看看ES6的语法。
还有你的chrome可能版本太低了吧。。。

变量的解构

Answer 2

准确说不是ES6的内容，而是ES7的内容。babel默认的配置只适配ES6. 另外babel分stage-0，stage-1，stage-2，stage-3，其中stage-0是最大的，包含其他stage。

所以增加 babel-preset-stage-0 就好了。

附上webpack配置：

babel-loader中增加：

query: {
    presets: ['es2015',  'stage-0', 'react']
}

Answer 3

ES6的语法啊，你说react支持展开对象，应该是安装react的环境 已经支持es6了，你直接写JS的时候应该是不支持es6

Answer 4

node 8.0以上版本开启--harmony才支持对象的rest运算符

Answer 5

和React没什么关系，是Babel支持。

Answer 6

结构赋值是ES7的内容，所以在用webpack转义时要在配置babel的情况下，额外再配置babel-preset-stage-1就可以了，与react没什么关系的

Answer 7

结构赋值是ES6的内容 支持ES6就可以了

Answer 8

楼上已经说了

node 8.0以上版本开启--harmony才支持对象的rest运算符（...）
可能是你安装react的时候应该也安装了babel

chrome中也可以执行的！

Answer 9

https://developer.mozilla.org...

Chrome 60 支持，node 8 要开 harmony