如何检查对象特定键并在存在时更新？文本输入写入model场景

我来帮你实现这个「存在则更新，不存在则新增」的逻辑，核心就是根据对象的Id字段判断数组中是否已有匹配项，再执行对应的操作。

核心思路 #

1. 遍历目标数组，查找与新对象Id一致的元素
2. 找到匹配元素：更新它的Value值
3. 未找到匹配元素：将新对象添加到数组中

具体实现代码 #

首先定义我们的model数组，以及处理更新/新增的函数：

// 初始化model数组
let model = [];

/**
 * 更新或新增数组中的对象
 * @param {Array} arr - 目标数组
 * @param {Object} newItem - 待提交的新对象（需包含Id和Value字段）
 * @returns {Array} 更新后的数组
 */
function updateOrAddItem(arr, newItem) {
  // 查找Id匹配的元素索引
  const targetIndex = arr.findIndex(item => item.Id === newItem.Id);
  
  if (targetIndex !== -1) {
    // 存在匹配项，更新Value
    arr[targetIndex].Value = newItem.Value;
  } else {
    // 无匹配项，新增对象
    arr.push(newItem);
  }
  
  return arr;
}

然后给页面中的按钮绑定点击事件，获取输入框的内容并调用上面的函数：

// 给所有按钮绑定点击逻辑
document.querySelectorAll('#wrapper button').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取对应的输入框元素
    const inputEl = this.previousElementSibling;
    // 构造待提交的对象
    const submitItem = {
      Id: inputEl.id,
      Value: inputEl.value
    };
    // 更新model数组
    model = updateOrAddItem(model, submitItem);
    
    // 可以在这里添加渲染逻辑，或者打印结果查看
    console.log('当前model状态:', model);
  });
});

进阶优化（大数据量场景） #

如果你的数组会包含大量元素，上面的findIndex方法（时间复杂度O(n)）可能不够高效，这时可以用Map来优化查找速度（时间复杂度O(1)）：

function updateOrAddItemWithMap(arr, newItem) {
  // 将数组转为Map，以Id为键
  const itemMap = new Map(arr.map(item => [item.Id, item]));
  // 覆盖/添加Map中的元素（保留原对象其他字段，仅更新传入的字段）
  itemMap.set(newItem.Id, { ...itemMap.get(newItem.Id), ...newItem });
  // 将Map转回数组
  return Array.from(itemMap.values());
}

这个方法在数据量大的时候性能提升会很明显，而且写法也更简洁。

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