JavaScript实现数组元素存在替换不存在新增 适配WebSocket订单更新场景

问题原因 #

• 你的代码核心问题出在Array.map()方法的特性上：map不会修改原数组，只会返回一个处理后的新数组，你调用orderArr.map(...)后没有把返回的新数组赋值给orderArr，原有数组完全不会发生变化，所以修改已有订单的逻辑完全不生效。
• 额外存在性能冗余：你先调用find遍历一次数组查询匹配订单，命中后又调用map第二次遍历数组做替换，两次遍历没有必要。

正确实现 #

方案1：修改原数组（性能最优，仅遍历1次） #

直接用findIndex定位到对应订单的位置，命中就替换，未命中就添加，和你原逻辑一致（新订单添加到数组开头）：

const matchIndex = orderArr.findIndex(item => item.id === webSocketOrder.id)
if (matchIndex !== -1) {
  // 找到匹配订单，直接替换对应位置的元素
  orderArr[matchIndex] = webSocketOrder
} else {
  // 无匹配订单，添加到数组开头
  orderArr.unshift(webSocketOrder)
}

如果你的需求是新订单添加到数组末尾，把unshift改为push即可。

方案2：不修改原数组（Immutable写法，适用于React状态更新等场景） #

如果需要保留原数组不变，返回新的订单数组，可以用如下写法：

const newOrderArr = orderArr.some(item => item.id === webSocketOrder.id)
  ? orderArr.map(ord => ord.id === webSocketOrder.id ? webSocketOrder : ord)
  : [webSocketOrder, ...orderArr] // 新订单放开头，要放末尾就改成 [...orderArr, webSocketOrder]

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