如何根据指定字段对数组中的对象进行新增或编辑操作？

实现方案 #

完全可以实现，我们可以封装通用函数完成该逻辑，支持自定义匹配字段，也可根据场景选择是否保留原数组（避免副作用）。

基础实现（适配绝大多数场景） #

/**
 * 数组对象更新/新增工具
 * @param {Array} arr 原对象数组
 * @param {Object} newItem 待新增/更新的对象
 * @param {String} matchKey 匹配用的字段名，默认id
 * @returns {Array} 处理后的新数组
 */
function upsertArrayItem(arr, newItem, matchKey = 'id') {
  // 拷贝原数组避免修改原数据，不需要保留原数组可删除该行直接操作arr
  const processedArr = [...arr]
  // 查找匹配项索引
  const targetIndex = processedArr.findIndex(item => item[matchKey] === newItem[matchKey])
  if (targetIndex > -1) {
    // 匹配成功，合并新旧对象，新对象字段覆盖旧对象同名字段
    processedArr[targetIndex] = {...processedArr[targetIndex], ...newItem}
  } else {
    // 匹配失败，新增对象到数组末尾
    processedArr.push(newItem)
  }
  return processedArr
}

// 测试你的示例
const arr = [{id: 1, value: "45"},{id: 2 , value: "34"}]
const newObject = {id: 1, value: "22"}
console.log(upsertArrayItem(arr, newObject))
// 输出结果：[{id: 1, value: "22"},{id: 2 , value: "34"}]

// 匹配失败的测试
const addNewObj = {id: 3, value: "12"}
console.log(upsertArrayItem(arr, addNewObj))
// 输出结果：[{id: 1, value: "45"},{id: 2 , value: "34"},{id: 3, value: "12"}]

大数组高性能实现 #

如果操作的数组长度极大、操作频次很高，可以用Map优化查找效率，将时间复杂度从O(n)降低到O(1)：

function upsertArrayItemHighPerformance(arr, newItem, matchKey = 'id') {
  const arrMap = new Map(arr.map(item => [item[matchKey], item]))
  // 匹配到就合并，没匹配到就直接新增
  arrMap.set(newItem[matchKey], {...arrMap.get(newItem[matchKey]) || {}, ...newItem})
  return Array.from(arrMap.values())
}

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