如何在JavaScript中使用.map()按顺序更新对象数组？

你的核心需求是利用数组索引，把lastNames里对应位置的姓氏赋值给employees数组中对应位置对象的familyName属性，最终返回更新后的对象数组。

原代码的问题 #

1. findIndex()必须传入回调函数才能使用，直接调用会报错，且你用它匹配两个数组索引的逻辑不成立
2. map回调里第一行就return matchNumber，导致后续代码完全不会执行
3. 错误操作整个数组objArr而非当前遍历的元素，同时直接把整个arr赋值给key，没有取对应索引的元素
4. 函数最后未返回生成的fullNames数组，调用后无法拿到结果

正确实现（纯函数写法，不修改原数据） #

const lastNames = ["Smith", "Anderson"];

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

function lastNameUpdater(lastNamesArr, employeesArr) {
  // map的回调函数可接收当前元素、当前索引两个关键参数
  const fullNames = employeesArr.map((employee, index) => {
    // 返回新对象，避免修改原数组里的对象
    return {
      ...employee, // 复制原对象的所有属性
      familyName: lastNamesArr[index] // 用索引匹配对应的姓氏
    };
  });
  return fullNames; // 必须返回结果数组
}

// 调用函数并获取结果
const updatedEmployees = lastNameUpdater(lastNames, employees);
console.log(updatedEmployees);

运行后会得到期望的结果：

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

关键知识点 #

• .map()的回调函数默认有三个参数：当前遍历的元素、当前元素的索引、原数组，这里就是利用index匹配两个数组的对应位置
• 使用扩展运算符...employee是为了创建新对象，而非直接修改原employees数组里的对象，这种纯函数写法不会污染原数据，更适合大多数场景

如果允许修改原对象（不推荐） #

若不需要保留原employees数组的原始数据，也可以直接修改原对象：

function lastNameUpdater(lastNamesArr, employeesArr) {
  return employeesArr.map((employee, index) => {
    employee.familyName = lastNamesArr[index];
    return employee;
  });
}

内容的提问来源于stack exchange，提问作者A-S-Hemphill