JavaScript如何高效更新多个数组中匹配指定id的元素

现有存储多组人员数据的data对象，包含4个结构一致的对象数组，结构定义如下：

const data = {
  arr1 : [{id: 1, name: "Mike"}, {id: 2, name: "Peter"}],
  arr2 : [{id: 6, name: "John"}, {id: 9, name: "Mary"}],
  arr3 : [{id: 5, name: "Nick"}, {id: 4, name: "Ken"}],
  arr4 : [{id: 3, name: "Kelvin"}, {id: 7, name: "Steve"}, {id: 8, name: "Hank"}]
}

需要实现根据传入id匹配对应元素、更新其name属性的功能。原有实现逐个数组调用findIndex查找索引后更新，存在大量重复逻辑：

const updateElement = (id: number, newName: string) => {
  let idx: number;

  idx = data.arr1.findIndex((e) => e.id === id);
  if (idx !== -1) data.arr1[idx].name = newName;

  idx = data.arr2.findIndex((e) => e.id === id);
  if (idx !== -1) data.arr2[idx].name = newName;

  idx = data.arr3.findIndex((e) => e.id === id);
  if (idx !== -1) data.arr3[idx].name = newName;

  idx = data.arr4.findIndex((e) => e.id === id);
  if (idx !== -1) data.arr4[idx].name = newName;
}

所有数组内元素遵循相同接口定义，可以通过以下两种方案优化，替代冗余的逐数组硬编码写法。

方案1：无侵入兼容写法（不改动原有数据结构） #

不需要调整现有data的存储结构，直接遍历data下的所有数组属性完成查找，命中目标后可直接终止遍历，减少无用计算。

interface DataItem {
  id: number;
  name: string;
}

const updateElement = (targetId: number, newName: string) => {
  for (const list of Object.values(data) as DataItem[][]) {
    const targetItem = list.find(item => item.id === targetId);
    if (targetItem) {
      targetItem.name = newName;
      // 由于id全局唯一，找到目标后直接终止后续遍历
      break;
    }
  }
}

这个方案的优势：

• 零侵入，完全兼容原有数据结构，不需要做额外的初始化或数据同步
• 无冗余代码，后续如果data新增arr5、arr6等数组属性，不需要修改更新逻辑，自动适配
• 性能和原有硬编码写法基本一致，命中后提前终止的逻辑还能减少不必要的遍历开销

方案2：高性能映射写法（适合高频更新场景） #

如果更新操作调用频率很高，可以在初始化阶段构建id到元素引用的映射表，后续更新时直接通过id定位元素，时间复杂度从O(n)降到O(1)，性能提升明显。

interface DataItem {
  id: number;
  name: string;
}

// 初始化阶段构建一次映射
const itemMap = new Map<number, DataItem>();
(Object.values(data) as DataItem[][]).forEach(list => {
  list.forEach(item => itemMap.set(item.id, item));
});

const updateElement = (targetId: number, newName: string) => {
  const targetItem = itemMap.get(targetId);
  if (targetItem) targetItem.name = newName;
}

注意事项：

• 如果后续会对各个数组做新增、删除元素的操作，需要同步更新itemMap的映射关系，避免出现数据不一致
• 如果数据集是固定的，或者可以低成本维护映射同步，这个方案在高频查询更新场景下的性能远高于遍历写法

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