对象扩展符入门指南

2023-11-11 05:52:02

什么是对象扩展符？

对象扩展符，也称为展开运算符，是 ES2015（ES6）中引入的新特性，它允许我们将一个对象的所有属性快速而轻松地复制到另一个对象中。

const obj1 = { name: "John Doe", age: 30 };
const obj2 = { ...obj1, city: "New York" };
console.log(obj2); // { name: "John Doe", age: 30, city: "New York" }

在上面的示例中，我们使用 ...obj1 将 obj1 的所有属性复制到 obj2 中。然后我们添加了一个新的属性 city，值为 "New York"。

2. 对象扩展符语法

对象扩展符的语法非常简单。它由三个点 (...) 组成，后面跟着要复制属性的对象。

const obj1 = { name: "John Doe", age: 30 };
const obj2 = { ...obj1 };
console.log(obj2); // { name: "John Doe", age: 30 }

上面的代码与前面的示例相同，我们使用 ...obj1 将 obj1 的所有属性复制到 obj2 中。然而，这一次我们没有添加任何新属性。

3. 属性重写

对象扩展符也可以用来重写对象的属性。如果我们复制一个已经存在于目标对象中的属性，那么该属性将被覆盖。

const obj1 = { name: "John Doe", age: 30 };
const obj2 = { ...obj1, age: 35 };
console.log(obj2); // { name: "John Doe", age: 35 }

上面的示例中，我们将 obj1 的所有属性复制到 obj2 中，然后我们重写了 age 属性，将其值改为 35。

4. 浅拷贝

对象扩展符只执行浅拷贝，这意味着它只会复制对象的属性，而不会复制对象的嵌套属性。

const obj1 = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "New York",
    state: "NY",
  },
};
const obj2 = { ...obj1 };
console.log(obj2);

上面的代码中，我们使用 ...obj1 将 obj1 的所有属性复制到 obj2 中。然而，obj2 的 address 属性并不是 obj1 的 address 属性的副本，而是一个对 obj1 的 address 属性的引用。

这意味着对 obj2 的 address 属性所做的任何更改都将反映在 obj1 的 address 属性中。

obj2.address.street = "456 Elm Street";
console.log(obj1); // {
  // ...
  address: {
    street: "456 Elm Street",
    city: "New York",
    state: "NY",
  },
};