如何在JavaScript中批量更新数组内多个对象的name属性？

咱们先理清楚核心需求：你现在要把rofl从单个值改成包含多个id的数组（比如["1","2","3"]），然后批量更新myArray中对应id的对象的name属性。这里有几个关键细节要注意，我一步步给你拆解实现方案：

1. 先处理id类型匹配问题 #

首先要注意：你的rofl数组里是字符串类型的id（比如"1"），但myArray里的id是数字类型（比如1），如果直接匹配会因为类型不匹配找不到对象，所以第一步要把字符串id转成数字。

2. 两种批量更新的实现方案 #

方案一：遍历rofl数组，用findIndex逐个处理 #

这种方式逻辑直观，适合数组规模不大的场景：

let myArray = [
  {id: 0, name: "Jhon"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
];
// 现在rofl是包含多个id的字符串数组
var rofl = ["1","2","3"];

// 遍历rofl中的每个id
rofl.forEach(idStr => {
  // 把字符串id转成数字，和原数组id类型统一
  const targetId = Number(idStr);
  // 找到对应对象的索引
  const objIndex = myArray.findIndex(obj => obj.id === targetId);
  
  // 必须加存在性判断，避免找不到对象时出错
  if (objIndex !== -1) {
    // 这里可以自定义name值，比如按id设置不同名称，或者统一设置
    myArray[objIndex].name = `Updated_${targetId}`;
    console.log(`已更新id为${targetId}的对象:`, myArray[objIndex]);
  } else {
    console.log(`未找到id为${targetId}的对象`);
  }
});

// 查看最终更新后的数组
console.log("批量更新完成后的数组:", myArray);

方案二：先转成id映射对象，再批量更新（更高效） #

如果你的myArray数据量很大，用findIndex每次遍历数组会有点低效。这时候可以先把数组转成「id→对象」的映射表，查找速度会变成O(1)：

let myArray = [
  {id: 0, name: "Jhon"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
];
var rofl = ["1","2","3"];

// 把数组转成id为键的映射对象（对象是引用类型，修改映射里的对象会同步修改原数组）
const idToObjMap = myArray.reduce((map, obj) => {
  map[obj.id] = obj;
  return map;
}, {});

// 遍历rofl批量更新
rofl.forEach(idStr => {
  const targetId = Number(idStr);
  const targetObj = idToObjMap[targetId];
  
  if (targetObj) {
    targetObj.name = `Updated_${targetId}`;
    console.log(`已更新id为${targetId}的对象:`, targetObj);
  } else {
    console.log(`未找到id为${targetId}的对象`);
  }
});

// 原数组已经同步更新
console.log("批量更新完成后的数组:", myArray);

3. 额外优化建议 #

如果需要给不同id设置不同的name值，可以把rofl改成包含id和对应name的数组，比如：

var rofl = [
  {id: "1", newName: "NewSara"},
  {id: "2", newName: "NewDomnic"},
  {id: "3", newName: "NewBravo"}
];

然后遍历的时候直接用item.newName去更新对应对象的name属性即可。

内容的提问来源于stack exchange，提问作者Best Jeanist