ES7 中增加了对象属性展开运算符，该运算符可以简化对象的赋值、合并等操作。本文将详细介绍对象属性展开运算符的使用技巧，以及示例代码及其指导意义。
什么是对象属性展开运算符？
对象属性展开运算符（Object Spread Operator）是一个新的语法符号 ...，用于展开对象的属性。当使用对象属性展开运算符时，可以将一个对象的属性展开并复制到另一个对象中：
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }在上面的代码中，...obj1 展开了 obj1 对象的所有属性，并将其复制到 obj2 对象中。此时，obj2 包含了 obj1 的所有属性以及新加入的 c: 3 属性。
对象属性展开运算符的使用技巧
合并对象
使用对象属性展开运算符可以方便地合并对象。如果需要将多个对象合并到一个对象中，可以使用对象属性展开运算符，而不是使用 Object.assign() 方法：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }在上面的代码中，...obj1 和 ...obj2 将对象 obj1 和 obj2 的属性展开并合并到 obj3 对象中，从而实现了属性的合并。
置换属性
使用对象属性展开运算符可以轻松地置换对象的属性。考虑到需要置换对象的 property1 和 property2 两个属性，可以使用对象属性展开运算符：
const obj = { a: 1, b: 2, property1: 'original value', property2: 'original value' };
const newObj = { ...obj, property1: 'new value1', property2: 'new value2' };
console.log(newObj); // { a: 1, b: 2, property1: 'new value1', property2: 'new value2' }在上面的代码中，...obj 展开了 obj 对象的所有属性，并将其赋值给 newObj，与此同时，property1 和 property2 属性也发生了置换。
用于返回默认值
使用对象属性展开运算符可以提供默认值，当在对象中查找不存在的属性时，会返回默认值。考虑下面的示例，假设我们需要从对象 obj 中获取属性 c 的值，但是该属性不存在，此时可以返回默认值：
const obj = { a: 1, b: 2 };
const { c = 3 } = obj;
console.log(c); // 3在上面的代码中，c = 3 表示当属性 c 不存在时，返回默认值 3。
对象属性展开运算符的指导意义
对象属性展开运算符是一种简单易用、功能强大的语法符号。相比较传统的属性赋值和合并方法，对象属性展开运算符可以让代码更加简洁和易读。
在实际项目中，除了上述提到的操作，对象属性展开运算符还可以用于 ReactJS 的 props 和 state 对象合并等场合。对于需要频繁操作对象的开发者，对象属性展开运算符无疑是一个非常实用的工具。
总结
本文介绍了 ES7 中的对象属性展开运算符的使用技巧，并提供了简单易读的示例代码及其指导意义。对象属性展开运算符是一种实用的新语法，有助于提高代码的简洁性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cd3ced1519ea946c114cf9