利用 ES9 的 object spread operator 优雅地组合对象

在前端开发中，我们经常需要组合对象。在 ES6 中，我们可以使用 Object.assign() 方法来实现这一目的。但是，ES9 中引入了 object spread operator，让组合对象变得更加优雅和简单。

object spread operator 是什么？

object spread operator 是 ES9 中引入的一个新特性，它使用三个点（...）来表示。它可以将一个对象的所有属性拷贝到另一个对象中，同时还可以添加、修改和删除属性。

下面是一个示例：

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

在这个示例中，我们使用 object spread operator 将 obj1 的属性拷贝到 obj2 中，并添加了两个新的属性 c 和 d。

object spread operator 的优势

使用 object spread operator 与使用 Object.assign() 相比，有以下优势：

1. 代码更加简洁易读。使用 object spread operator，我们可以一行代码就完成对象的组合。

2. 支持嵌套对象的拷贝。使用 Object.assign()，如果对象中包含嵌套对象，我们需要使用递归来实现深拷贝。而使用 object spread operator，我们可以轻松地实现深拷贝。

3. 支持添加、修改和删除属性。使用 Object.assign()，我们只能拷贝属性，不能添加、修改或删除属性。而使用 object spread operator，我们可以轻松地实现这些操作。

object spread operator 的使用场景

object spread operator 可以用于以下场景：

1. 合并对象。我们可以使用 object spread operator 将多个对象合并成一个对象。

2. 拷贝对象。我们可以使用 object spread operator 来深拷贝一个对象。

3. 添加、修改和删除属性。我们可以使用 object spread operator 来添加、修改和删除对象的属性。

示例代码

下面是一些示例代码，演示了如何使用 object spread operator。

合并对象

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 }

拷贝对象

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

添加属性

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

修改属性

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

删除属性

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

总结

在本文中，我们介绍了 ES9 中引入的 object spread operator 特性，它可以优雅地组合对象。我们还讨论了 object spread operator 的优势和使用场景，并提供了示例代码。使用 object spread operator，可以让代码更加简洁易读，同时支持嵌套对象的拷贝和添加、修改和删除属性。

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