JavaScript数组对象添加isActive键并匹配替换选中项的实现优化

你当前的实现存在嵌套循环导致的性能问题，以及重复逻辑冗余的问题，优化后方案如下：

最优实现代码 #

// 预先将选中项的label存入Set，实现O(1)复杂度的存在性校验
const activeLabelSet = new Set(
  (this.selectedFilterList || []).map(filter => filter.label)
);

// 单次遍历完成数据组装，不需要额外分支判断
this.bindingData = this.data.map(item => {
  return {
    ...item,
    isActive: activeLabelSet.has(item.label)
  };
});

优化点说明 #

• 性能大幅提升：时间复杂度从原来的O(n*m)（n为this.data长度，m为selectedFilterList长度）降低到O(n+m)，数据量越大性能优势越明显，避免了嵌套循环的不必要开销
• 代码冗余消除：不需要再单独判断selectedFilterList是否为空，空Set的has方法永远返回false，天然匹配所有项isActive为false的需求，删掉了两个分支中重复的map逻辑
• 逻辑更简洁：一次遍历即可完成所有对象的isActive字段赋值，不需要先批量设为false再二次遍历修改选中项状态
• 无副作用：所有对象都是新生成的，不会修改原始this.data里的对象数据，符合原代码的不可变操作逻辑

扩展适配场景 #

如果后续需求中selectedFilterList里的isActive可能存在false值，需要保留选中列表里的isActive状态而不是固定设为true，可以改用对象做映射：

const activeMap = Object.fromEntries(
  (this.selectedFilterList || []).map(item => [item.label, item.isActive])
);

this.bindingData = this.data.map(item => ({
  ...item,
  isActive: activeMap[item.label] ?? false
}));

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