使用Lodash合并数组时如何保留旧字段并更新view.id匹配项

解决方案 #

你用_.unionBy达不到预期的原因是，该方法的去重逻辑是直接保留首个命中匹配规则的完整对象，不会对两个匹配对象的字段做合并处理，因此会出现要么丢失原数组id、要么丢失更新内容的问题。

你可以通过keyBy+字段合并+补全新增项的逻辑实现需求，示例代码如下：

// 1. 将更新数组转为以view.id为键的映射表，方便快速查找匹配项
const updatedMap = _.keyBy(updatedValue, 'view.id')

// 2. 遍历原数组，匹配到更新项的做字段合并，未匹配的保留原有内容
const processedOldItems = lastValue.map(oldItem => {
  const matchedUpdate = updatedMap[oldItem.view.id]
  // 合并规则：旧项在前，更新项在后，更新项的字段会覆盖旧项同名字段，同时保留旧项独有的id字段
  return matchedUpdate ? _.merge({}, oldItem, matchedUpdate) : oldItem
})

// 3. 筛选出更新数组中在原数组里不存在的新增项
const newItems = updatedValue.filter(updateItem => 
  !_.some(lastValue, { view: { id: updateItem.view.id } })
)

// 4. 合并两部分得到最终结果
const finalResult = [...processedOldItems, ...newItems]

如果你的业务场景中不需要深层合并对象（比如view下的字段不会有更新差异），也可以把_.merge替换为浅合并的对象展开写法，性能更好：

return matchedUpdate ? {...oldItem, ...matchedUpdate} : oldItem

最终输出结果和你预期的完全一致。

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