匹配键时如何更新数组值？现有代码仅实现去重未更新

我来帮你搞定这个问题～你的原代码是用来做数组去重，只保留每个key第一次出现的对象，但现在要改成遇到相同key时更新对应的值，对吧？

咱们先拆解下原代码的逻辑：

this.state.data.concat(items).filter(function (a) { return !this[a.key] && (this[a.key] = true); }, Object.create(null))

这段代码是把this.state.data和items合并后，用filter配合一个空对象做去重——每个key第一次出现时会被保留，后续相同key的对象会被过滤掉，所以自然没法更新已有key的值。

要实现键匹配时更新值，不匹配时添加新对象，推荐用这两种方法：

方法一：用Array.reduce()遍历处理（直观易读） #

这种方式适合数据量不大的场景，逻辑清晰：

// 合并原数据和新items，然后用reduce构建结果数组
const updatedData = [...this.state.data, ...items].reduce((accumulator, currentItem) => {
  // 查找当前item的key是否已存在于结果数组中
  const existingItemIndex = accumulator.findIndex(item => item.key === currentItem.key);
  
  if (existingItemIndex !== -1) {
    // 存在则更新：用扩展运算符合并旧对象和新对象，新值会覆盖旧值
    accumulator[existingItemIndex] = { ...accumulator[existingItemIndex], ...currentItem };
  } else {
    // 不存在则添加新对象
    accumulator.push(currentItem);
  }
  
  return accumulator;
}, []);

// 最后更新state（React场景下）
this.setState({ data: updatedData });

方法二：用对象做映射（效率更高） #

如果你的数据量比较大，用对象做中间映射可以把查找key的时间复杂度降到O(1)，比findIndex的O(n)更高效：

// 先创建一个以key为键的映射对象
const dataMap = {};

// 把原数据存入映射
this.state.data.forEach(item => {
  dataMap[item.key] = item;
});

// 遍历新items，存在则更新，不存在则添加
items.forEach(item => {
  // 合并旧值和新值，新属性会覆盖旧属性
  dataMap[item.key] = { ...dataMap[item.key], ...item };
});

// 把映射对象转成数组，得到最终结果
const updatedData = Object.values(dataMap);

// 更新state
this.setState({ data: updatedData });

注意事项 #

• 如果你用的是React，一定要注意不可变更新：不要直接修改this.state.data，而是要创建新的数组/对象来更新state，避免触发不了重新渲染。
• 上面的代码用{ ...old, ...new }的方式合并对象，会让新对象的属性覆盖旧对象的同名属性，如果需要更复杂的更新逻辑（比如嵌套对象的更新），可以根据需求调整合并规则。

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