匹配indID后替换JavaScript对象数组中对应属性的最佳实现方法

最优实现方案 #

场景1：indID为唯一主键（绝大多数业务场景，性能最优） #

利用Array.find()找到匹配项后立即终止遍历，性能开销最小，代码如下：

// 提前提取变量，避免遍历过程中重复访问属性
const targetIndID = checkedBy.indID;
const newName = checkedBy.data.name;

// 查找匹配项
const matchedOrg = organisations.data.data.find(item => item.indID === targetIndID);
// 匹配到才修改，避免空值报错
if (matchedOrg) {
  matchedOrg.name = newName;
}

场景2：存在多个相同indID需要批量修改 #

如果业务逻辑允许数组内存在重复indID，需要全部修改，使用Array.forEach()遍历全量修改：

const targetIndID = checkedBy.indID;
const newName = checkedBy.data.name;

organisations.data.data.forEach(item => {
  if (item.indID === targetIndID) {
    item.name = newName;
  }
});

场景3：不可变数据需求（如React状态更新、函数式编程场景） #

如果不允许修改原对象，需要返回全新对象，使用Array.map()生成新数组：

const targetIndID = checkedBy.indID;
const newName = checkedBy.data.name;

const updatedOrganisations = {
  ...organisations,
  data: {
    ...organisations.data,
    data: organisations.data.data.map(item => 
      item.indID === targetIndID ? {...item, name: newName} : item
    )
  }
};

方案优势 #

• 提前提取目标值，减少遍历过程中的属性访问开销
• 针对不同业务场景选择最优遍历方法，时间复杂度最低为O(k)（k为匹配项的下标位置）
• 增加空值判断逻辑，避免无匹配项时报错，鲁棒性更高
• 不需要引入额外第三方依赖，原生JS实现兼容性好

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