ES6对象扩展运算符`...`如何使用？对象复制用它为何报语法错误？

嘿，我来帮你搞清楚对象扩展运算符...的用法，还有你遇到的语法问题~

1. 复制/合并对象属性 #

这正是你尝试的场景——把一个对象的所有可枚举属性浅拷贝到新对象里，还能同时添加新属性或覆盖原有属性，例子如下：

const baseObj = { name: 'Alice', age: 25 };
// 复制baseObj的属性，同时添加新属性job
const newObj = { ...baseObj, job: 'Engineer' };
console.log(newObj); // { name: 'Alice', age: 25, job: 'Engineer' }

2. 对象解构剩余属性 #

在解构对象时，可以用...收集未被明确解构的剩余属性：

const user = { id: 1, name: 'Bob', email: 'bob@example.com' };
const { id, ...userInfo } = user;
console.log(id); // 1
console.log(userInfo); // { name: 'Bob', email: 'bob@example.com' }

3. 配合函数参数传递 #

可以把对象的属性展开后作为参数传递（不过更多时候会直接用对象解构参数，这个场景是补充用法）：

function printUser(name, age) {
  console.log(`${name} is ${age} years old`);
}
const user = { name: 'Charlie', age: 30 };
printUser(...Object.values(user)); // Charlie is 30 years old

你写的代码var a = function(){ return {c: 2}; } var b = {...a()};报错，核心原因是：对象扩展运算符并不是ES6（ES2015）的特性，它是ES2018（ES9）才加入标准的！早期版本的Chrome可能还没支持这个语法。

解决办法有两个：

• 升级你的Chrome浏览器到60版本及以上（这个版本开始Chrome原生支持对象扩展运算符）；
• 如果需要兼容旧环境，用Object.assign()来替代，效果完全一致：

var a = function(){ return {c: 2}; }
var b = Object.assign({}, a()); // 和{...a()}功能相同，浅拷贝对象属性

另外要注意：不管用...还是Object.assign()，都是浅拷贝——如果原对象里有嵌套的对象或数组，复制的只是引用，修改嵌套内容会影响原对象。

内容的提问来源于stack exchange，提问作者ShuntaoChen