在 JavaScript 中，遍历对象数组是一项常见的任务。然而，当你第一次尝试时，你可能会遇到一些奇怪的行为。本文将详细介绍对象数组的遍历方式、奇怪行为的原因以及如何解决这些问题。
对象数组的遍历方式
JavaScript 中最常用的遍历数组的方法是使用循环。我们可以使用 for 循环遍历数组中的每个元素，例如：
----- --- - ------- -------- ---- ---- ------ ------ ---- ---- ------ ---------- ---- ----- --- ---- - - -- - - ----------- ---- - ------------------------- -
这段代码将输出 "Alice"、"Bob" 和 "Charlie"。
另一种常用的方法是使用 forEach() 方法，它对数组中的每个元素调用一个函数。例如：
---------------- -- - ----------------------- ---
这段代码也将输出 "Alice"、"Bob" 和 "Charlie"。
奇怪的行为
然而，在实践中，你可能会遇到一些奇怪的行为。例如，考虑以下对象数组：
----- --- - ------- --------- ------ ------- ------ ------------
如果我们尝试通过以下方式添加 age 属性：
---------------- -- - -------- - --- ---
我们可能会认为每个对象都会被添加一个 age 属性，但是实际上只有最后一个对象被添加了 age 属性。
这是因为 JavaScript 中的对象是通过引用传递的。在上面的示例中，forEach() 方法将每个对象的引用传递给函数。当该函数修改对象的属性时，它实际上修改的是对象在数组中的引用指向的位置，而不是对象本身。因此，最后一个对象在循环结束时具有 age 属性，而其他对象没有。
如何解决这些问题
为了避免这种奇怪的行为，我们可以使用 map() 方法创建一个新的对象数组。例如：
----- ------ - ------------ -- ---------- ---- ------
这段代码将创建一个新的对象数组，其中包含原始数组中的所有对象及其 age 属性。
另一个解决方法是使用 Object.assign() 方法。例如：
---------------- -- - ------------------- ----- ----- ---
这段代码将使用 Object.assign() 方法将 age 属性添加到每个对象中。由于 Object.assign() 方法返回的是目标对象，因此在修改对象时应该将其作为第一个参数传递。
结论
遍历对象数组是 JavaScript 中常见的任务之一。在遍历对象数组时，应该注意对象是通过引用传递的，并且修改对象的属性会影响所有引用该对象的地方。为了避免这种问题，可以使用 map() 方法或 Object.assign() 方法创建一个新的对象数组或将属性添加到每个对象中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29508