在JavaScript/React JS中如何高效按ID更新对象数组指定元素

首先你当前贴出的代码存在两处错误，实际运行会出现异常：

• map 回调中只对匹配id的项做了返回，其余项没有返回值，会导致最终生成的数组其余位置都是undefined
• 匹配到目标项时展开的是整个update数组而不是当前遍历的item，会导致更新后的对象结构异常，如果你实际运行正常应该是贴代码时的笔误。

常规场景最优方案（数据量1万条以内推荐） #

1000条数据的量级下全量遍历的性能损耗完全可以忽略不计，JS遍历1万条普通对象数组仅需零点几毫秒，不会对页面渲染造成任何影响。map写法的可读性和可维护性最高，符合React不可变更新的规范，是绝大多数业务场景的首选，修正后的正确写法如下：

const [data, setData] = useState(myData);

// 封装更新方法
const updateItemAgeById = (targetId, newAge) => {
  setData(prevState => 
    prevState.map(item => 
      item.id === targetId ? { ...item, age: newAge } : item
    )
  );
};

// 调用示例：更新id为3的age为100
updateItemAgeById(3, 100);

高性能场景方案（数据量10万+/频繁更新推荐） #

如果你面对的是超大量级数据或者需要高频次更新，可以选择以下两种性能更优的方案：

方案1：索引定位更新（平均性能优于全量map） #

通过findIndex先定位到目标项的索引，匹配到目标就停止遍历，仅修改对应位置的元素，不需要遍历全量数组：

const updateItemAgeById = (targetId, newAge) => {
  setData(prevState => {
    const targetIndex = prevState.findIndex(item => item.id === targetId);
    // 未找到目标项直接返回原数组，避免无意义的状态更新
    if (targetIndex === -1) return prevState;
    // 浅拷贝原数组
    const newState = [...prevState];
    // 更新对应位置的对象，保证不可变性
    newState[targetIndex] = { ...newState[targetIndex], age: newAge };
    return newState;
  });
};

方案2：Map结构存储（O(1)时间复杂度更新，性能最优） #

如果需要非常频繁的按id查找、更新数据，直接将数据以id为键存储为Map结构，更新操作不需要遍历，时间复杂度为O(1)，是性能最优的方案：

// 初始化时将数组转成Map，以id为键
const [dataMap, setDataMap] = useState(() => new Map(myData.map(item => [item.id, item])));

// 更新方法
const updateItemAgeById = (targetId, newAge) => {
  setDataMap(prevMap => {
    const targetItem = prevMap.get(targetId);
    if (!targetItem) return prevMap;
    // 生成新的Map实例，符合React不可变更新要求
    return new Map(prevMap).set(targetId, { ...targetItem, age: newAge });
  });
};

// 渲染时需要转数组可以调用：Array.from(dataMap.values())

选择建议 #

不要过早做性能优化，常规业务场景下优先选择map的写法，可读性最高、出错概率最低。只有在实测出现性能问题时，再根据场景选择更高性能的方案即可。

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