ECMAScript 2018：如何使用对象的扩展运算符

在 ECMAScript 2018 中，对象的扩展运算符是一个非常有用的功能。它可以让我们更方便地操作对象，提高代码的可读性和可维护性。本文将介绍对象的扩展运算符的基本用法和高级用法，并提供示例代码。

基本用法

对象的扩展运算符可以用于将一个对象的所有属性解构到另一个对象中。例如：

const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};
console.log(obj2); // {a: 1, b: 2, c: 3}

在这个例子中，我们使用了扩展运算符 ... 将 obj1 中的所有属性解构到了 obj2 中，并添加了一个新的属性 c。

除了可以用于对象的解构，扩展运算符还可以用于函数的传参。例如：

function foo({a, b, c}) {
  console.log(a, b, c);
}
const obj = {a: 1, b: 2, c: 3};
foo({...obj}); // 1 2 3

在这个例子中，我们使用了扩展运算符将 obj 中的所有属性解构到了函数 foo 的参数中。

高级用法

除了基本用法之外，对象的扩展运算符还有一些高级用法，可以让我们更加灵活地操作对象。

嵌套对象的解构

扩展运算符可以用于嵌套对象的解构。例如：

const obj1 = {a: 1, b: {c: 2, d: 3}};
const obj2 = {...obj1, b: {...obj1.b, c: 4}};
console.log(obj2); // {a: 1, b: {c: 4, d: 3}}

在这个例子中，我们使用了扩展运算符将 obj1 中的所有属性解构到了 obj2 中，并修改了嵌套对象 b 中的属性 c。

合并对象

扩展运算符还可以用于合并对象。例如：

const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {a: 1, b: 3, c: 4}

在这个例子中，我们使用了扩展运算符将 obj1 和 obj2 中的所有属性合并到了 obj3 中，并覆盖了重复的属性 b。

删除属性

扩展运算符还可以用于删除对象的属性。例如：

const obj1 = {a: 1, b: 2, c: 3};
const {b, ...obj2} = obj1;
console.log(obj2); // {a: 1, c: 3}

在这个例子中，我们使用了对象的解构和扩展运算符，将 obj1 中的属性 b 删除，并将剩下的属性解构到了 obj2 中。

总结

对象的扩展运算符是 ECMAScript 2018 中非常有用的功能，它可以让我们更方便地操作对象，提高代码的可读性和可维护性。本文介绍了对象的扩展运算符的基本用法和高级用法，并提供了示例代码。希望本文对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bee9a8add4f0e0ff86ed67