更新嵌套属性 in JavaScript

在 JavaScript 中，更新嵌套对象或数组的属性可能会有些困难。在这篇文章中，我们将探讨如何更新嵌套属性的不同方法。

对象嵌套属性

首先让我们看一个对象嵌套属性的例子：

const person = {
  name: "John",
  address: {
    city: "New York",
    state: "NY",
    zip: "10001"
  }
};

要更新地址的城市，我们可以使用以下方法：

person.address.city = "Los Angeles";

这将直接更新嵌套属性的值。

然而，当嵌套对象较深时，这种方法可能变得麻烦。因此我们可以使用 Object.assign() 方法来更新嵌套属性：

person = Object.assign({}, person, {
  address: Object.assign({}, person.address, {
    city: "Los Angeles"
  })
});

此方法将创建一个新的对象并将原始对象及其属性复制到新对象中。然后，它会使用覆盖方法将新值存储在指定属性中。

还可以使用展开运算符（spread operator）来更新嵌套属性：

person = {
  ...person,
  address: {
    ...person.address,
    city: "Los Angeles"
  }
};

此方法也会创建一个新对象，并使用展开运算符将嵌套属性复制到新对象中。然后，它会覆盖指定的属性以更新值。

数组嵌套属性

如果嵌套属性是数组，那么更新将变得更加复杂。下面是一个嵌套数组属性的示例：

const people = [
  {
    name: "John",
    hobbies: ["surfing", "reading"]
  },
  {
    name: "Jane",
    hobbies: ["painting", "traveling"]
  }
];

要更新第一个人的第一个爱好，我们可以使用以下方法：

people[0].hobbies[0] = "skateboarding";

对于更深嵌套的数组，可以使用 map() 方法来更新特定位置的项：

const updatedPeople = people.map(person =>
  person.name === "John"
    ? {
        ...person,
        hobbies: person.hobbies.map((hobby, index) =>
          index === 0 ? "skateboarding" : hobby
        )
      }
    : person
);

此方法使用 map() 遍历原始数组，并对每个对象进行修改。对于需要更新的对象，map() 将创建新对象，并使用展开运算符将原始对象的属性复制到新对象中。然后它通过遍历嵌套的 hobbies 数组并在特定位置更新项目。

使用上述方法可以轻松更新 JavaScript 中的嵌套属性。要了解更多有关 JavaScript 的信息，请查看 MDN Web Docs。