使用JavaScript的map方法和索引高效更新对象数组

本教程详细介绍了如何利用JavaScript的Array.prototype.map()方法及其回调函数的第二个参数（索引），结合ES6的展开语法（Spread Syntax），高效且不可变地更新对象数组中的特定属性。文章通过一个实际案例，演示了如何将外部数组的值根据索引同步映射到对象数组的对应元素上，从而生成一个全新的、已更新的对象数组。

场景概述

在前端开发中，我们经常会遇到需要根据一个数组的值来更新另一个对象数组中对应元素的特定属性的场景。例如，我们有一个员工对象数组，其中包含员工姓名和空的家庭名（familyName），同时我们还有一个独立的家庭名数组。我们的目标是根据索引将家庭名数组中的值逐一赋给员工对象数组中对应员工的familyName属性，并生成一个新的、更新后的员工列表。

原始数据示例：

const lastNames = ["Smith", "Anderson"];const employees = [  {    name: "Jim",    familyName: "",  },  {    name: "Jill",    familyName: "",  }];

我们希望最终得到一个类似这样的结果：

[  {    name: "Jim",    familyName: "Smith",  },  {    name: "Jill",    familyName: "Anderson",  }]

解决方案：利用 Array.prototype.map() 和索引

JavaScript的Array.prototype.map()方法是处理数组并生成新数组的强大工具。它的回调函数不仅接收当前元素作为第一个参数，还会接收当前元素的索引作为第二个参数。这正是解决我们问题的关键。

立即学习“Java免费学习笔记（深入）”；

核心思路

遍历数组： 使用employees.map()遍历employees数组中的每个员工对象。获取索引： map回调函数的第二个参数index提供了当前员工对象在数组中的位置。同步取值： 利用这个index，从lastNames数组中获取对应的家庭名：lastNames[index]。创建新对象： 为了保持数据的不可变性（Immutable Data），我们不直接修改原始的员工对象。而是使用ES6的展开语法（Spread Syntax …）创建一个新的员工对象，复制原始员工对象的所有属性，然后覆盖或添加familyName属性。

示例代码

以下是实现上述逻辑的完整代码：

/** * 更新员工数组中每个员工的家庭名。 * * @param {Array