在 JavaScript 中遍历对象数组 - 奇怪的行为？

在 JavaScript 中，遍历对象数组是一项常见的任务。然而，当你第一次尝试时，你可能会遇到一些奇怪的行为。本文将详细介绍对象数组的遍历方式、奇怪行为的原因以及如何解决这些问题。

对象数组的遍历方式

JavaScript 中最常用的遍历数组的方法是使用循环。我们可以使用 for 循环遍历数组中的每个元素，例如：

const arr = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}, {name: 'Charlie', age: 35}];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i].name);
}

这段代码将输出 "Alice"、"Bob" 和 "Charlie"。

另一种常用的方法是使用 forEach() 方法，它对数组中的每个元素调用一个函数。例如：

arr.forEach(item => {
  console.log(item.name);
});

这段代码也将输出 "Alice"、"Bob" 和 "Charlie"。

奇怪的行为

然而，在实践中，你可能会遇到一些奇怪的行为。例如，考虑以下对象数组：

const arr = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];

如果我们尝试通过以下方式添加 age 属性：

arr.forEach(item => {
  item.age = 30;
});

我们可能会认为每个对象都会被添加一个 age 属性，但是实际上只有最后一个对象被添加了 age 属性。

这是因为 JavaScript 中的对象是通过引用传递的。在上面的示例中，forEach() 方法将每个对象的引用传递给函数。当该函数修改对象的属性时，它实际上修改的是对象在数组中的引用指向的位置，而不是对象本身。因此，最后一个对象在循环结束时具有 age 属性，而其他对象没有。

如何解决这些问题

为了避免这种奇怪的行为，我们可以使用 map() 方法创建一个新的对象数组。例如：

const newArr = arr.map(item => ({...item, age: 30}));

这段代码将创建一个新的对象数组，其中包含原始数组中的所有对象及其 age 属性。

另一个解决方法是使用 Object.assign() 方法。例如：

arr.forEach(item => {
  Object.assign(item, {age: 30});
});

这段代码将使用 Object.assign() 方法将 age 属性添加到每个对象中。由于 Object.assign() 方法返回的是目标对象，因此在修改对象时应该将其作为第一个参数传递。

结论

遍历对象数组是 JavaScript 中常见的任务之一。在遍历对象数组时，应该注意对象是通过引用传递的，并且修改对象的属性会影响所有引用该对象的地方。为了避免这种问题，可以使用 map() 方法或 Object.assign() 方法创建一个新的对象数组或将属性添加到每个对象中。

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