在前端开发中，处理对象是十分常见的任务。而在 JavaScript 中，对象的属性赋值是一种基本操作。ES9（即 ECMAScript 2018）新增了一种对象操作语法：Object Rest/Spread 操作符，可以更加方便地操作对象属性。本文将介绍使用 ES9 的 Object Rest/Spread 操作符简化对象的属性赋值的方法，包括语法、应用以及注意事项。
语法
Object Rest/Spread 操作符可以使用 ... 对象来表示。这个操作符可以让我们轻易地拷贝、合并和重组对象。下面是对象的三个变形表达式：
展开属性
展开属性操作符可以通过"..."运算符将属性解构为多个单独的属性来创建一个新对象。 例如：
const person = { name: 'John', age: 25, occupation: 'developer' };
const { name, age, ...rest } = person;
console.log(name); // 'John'
console.log(rest); // { occupation: 'developer' }在上面的例子中，我们展开 person 对象中的两个属性 { name, age }, 并将它们分解为单独的 name 和 age 变量。我们使用了 rest 操作符收集剩下的对象属性，即 occupation。我们可以看到 rest 变量现在是一个对象，它具有被分解的对象中剩下的所有属性。
合并属性
我们可以使用 Object.assign() 方法来合并对象属性。但是，使用展开属性操作符更方便。例如：
const person = { name: 'John', age: 25 };
const address = { country: 'USA', state: 'California' };
const mergedObject = { ...person, ...address };
console.log(mergedObject); // { name: 'John', age: 25, country: 'USA', state: 'California' }在这个例子中，我们用 ...person 来展开 person 对象并用 ...address 来展开 address 对象。现在我们可以将这两个对象合并到 mergedObject 变量中，并创建了新的对象，其中包含了 person 和 address 对象中的所有属性。
重组属性
当你需要根据现有对象来创建一个新对象时，重组属性在很多情况下是很有用的。例如：
const person = { name: 'John', age: 25, occupation: 'developer' };
const newPerson = { ...person, occupation: 'designer' };
console.log(person); // { name: 'John', age: 25, occupation: 'developer' }
console.log(newPerson); // { name: 'John', age: 25, occupation: 'designer' }在上面的例子中，我们创建了一个新对象 newPerson，它的属性与 person 对象相同，只是 occupation 属性不同。我们只需要在新对象中覆盖旧对象中的属性即可。
应用
使用 Object Rest/Spread 操作符可以使代码更加简洁易读，并且可以让我们更容易地处理对象。下面是 Object Rest/Spread 操作符的一些实际应用：
从对象中选取属性
const person = { name: 'John', age: 25, occupation: 'developer' };
const { name, age } = person;在代码中传递参数
const person = { name: 'John', age: 25, occupation: 'developer' };
function displayPersonInfo({ name, age, occupation }) {
console.log(`Name: ${name}, Age: ${age}, Occupation: ${occupation}`);
}
displayPersonInfo(person);合并对象
const person = { name: 'John', age: 25 };
const address = { country: 'USA', state: 'California' };
const mergedObject = { ...person, ...address };重组对象
const person = { name: 'John', age: 25, occupation: 'developer' };
const newPerson = { ...person, occupation: 'designer' };注意事项
使用 Object Rest/Spread 操作符时，有一些注意事项：
- Object Rest/Spread 操作符在很多浏览器和 Node.js 版本中可能不被支持。您可以使用 Babel 等转换工具，以使您的代码在不同环境中均可运行。
- 重组属性中我们只是覆盖了对象的属性，并没有改变原对象。如果您要改变对象，您需要使用 Object.assign() 方法或类似的方法。
总结
Object Rest/Spread 操作符是一种语法糖，它可以使我们更容易地操作对象。使用这个操作符，我们可以快速拷贝、合并和重组对象，并创建新的对象，改变它们的属性以及传递各种参数。在编写 JavaScript 代码时，使用 Object Rest/Spread 操作符能够提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f04017d4982a6eb8794c6