在 ES6 中，对象扩展符是一种非常强大的语法，它可以让我们更加方便地创建和操作对象。本文将详细介绍 ES6 中的对象扩展符，包括其基本语法、常见用法以及一些高级技巧，希望能够给广大前端开发者带来帮助。
基本语法
ES6 中的对象扩展符由三个部分组成，分别是 {}、... 和对象的属性列表。其中，{} 表示创建一个新的对象，... 表示扩展符，用于将一个对象的属性列表扩展到另一个对象中。具体来说，对象扩展符的基本语法如下：
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }在上面的代码中，我们首先创建了一个对象 obj1，它包含两个属性 a 和 b。然后，我们使用对象扩展符将 obj1 的属性列表扩展到另一个对象 obj2 中，并在 obj2 中添加了两个新的属性 c 和 d。最终，obj2 的值为 { a: 1, b: 2, c: 3, d: 4 }。
需要注意的是，对象扩展符只能用于浅拷贝，即只会拷贝对象的第一层属性，而不会递归拷贝对象的子属性。如果需要递归拷贝对象，可以使用第三方库如 lodash。
常见用法
对象扩展符有很多常见的用法，下面我们将逐一介绍。
1. 合并对象
我们可以使用对象扩展符将多个对象合并成一个新的对象，如下所示：
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }在上面的代码中，我们首先创建了两个对象 obj1 和 obj2，然后使用对象扩展符将它们合并成一个新的对象 obj3，最终 obj3 的值为 { a: 1, b: 2, c: 3, d: 4 }。
2. 克隆对象
我们可以使用对象扩展符快速克隆一个对象，如下所示：
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }在上面的代码中，我们首先创建了一个对象 obj1，然后使用对象扩展符将它克隆到另一个对象 obj2 中，最终 obj2 的值和 obj1 的值相同。
3. 添加新属性
我们可以使用对象扩展符在一个对象中添加新的属性，如下所示：
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }在上面的代码中，我们首先创建了一个对象 obj1，然后使用对象扩展符将它的属性列表扩展到另一个对象 obj2 中，并在 obj2 中添加了一个新的属性 c，最终 obj2 的值为 { a: 1, b: 2, c: 3 }。
4. 删除属性
我们可以使用对象扩展符删除一个对象中的属性，如下所示：
let obj1 = { a: 1, b: 2, c: 3 };
let { c, ...obj2 } = obj1;
console.log(obj2); // { a: 1, b: 2 }在上面的代码中，我们首先创建了一个对象 obj1，然后使用对象扩展符将它的属性列表扩展到另一个对象中，并使用解构赋值的方式将属性 c 删除，最终得到的对象 obj2 的值为 { a: 1, b: 2 }。
需要注意的是，删除属性时，不要直接修改原始对象，而应该使用解构赋值的方式创建一个新的对象。
高级技巧
除了常见用法，对象扩展符还有一些高级技巧，下面我们将逐一介绍。
1. 设置默认值
我们可以使用对象扩展符设置默认值，如下所示：
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3, d: 4, b: 5 };
console.log(obj2); // { a: 1, b: 5, c: 3, d: 4 }在上面的代码中，我们首先创建了一个对象 obj1，然后使用对象扩展符将它的属性列表扩展到另一个对象 obj2 中，并在 obj2 中添加了两个新的属性 c 和 d。同时，我们还将属性 b 的值从 2 修改为了 5。最终，obj2 的值为 { a: 1, b: 5, c: 3, d: 4 }。
需要注意的是，如果被扩展的对象和扩展后的对象中都存在相同的属性，那么扩展后的对象中的属性值会覆盖被扩展的对象中的属性值。
2. 动态属性名
我们可以使用对象扩展符创建动态属性名，如下所示：
let name = 'Tom';
let obj = { [name]: 'Hello World' };
console.log(obj); // { Tom: 'Hello World' }在上面的代码中，我们使用对象扩展符创建了一个动态属性名，属性名的值为变量 name 的值，属性值为字符串 'Hello World'。最终，obj 的值为 { Tom: 'Hello World' }。
需要注意的是，动态属性名需要使用 [] 包裹起来。
3. 对象方法
我们可以使用对象扩展符创建对象方法，如下所示：
let obj = {
add(a, b) {
return a + b;
}
};
console.log(obj.add(1, 2)); // 3在上面的代码中，我们使用对象扩展符创建了一个对象方法 add，它接受两个参数 a 和 b，并返回它们的和。最终，obj.add(1, 2) 的值为 3。
需要注意的是，对象方法不需要使用 function 关键字声明，直接使用方法名和参数列表即可。
总结
本文详细介绍了 ES6 中的对象扩展符，包括其基本语法、常见用法以及一些高级技巧。对象扩展符是一种非常强大的语法，它可以让我们更加方便地创建和操作对象。希望本文能够给广大前端开发者带来帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6569b549d2f5e1655d2443c0