如何基于字符串数组更新对象数组的active属性？

需求说明：根据选择的字符串数组，更新对象数组的active属性——仅将name属性存在于selectedArray中的元素的active设为true，其余设为false。

示例 #

默认对象数组 #

const defaultArray = [
  {
    "active": true,
    "id": 1,
    "name": "ABC",
    "value": "1"
  },
  {
    "active": true,
    "id": 2,
    "name": "DEF",
    "value": "2"
  },
  {
    "active": true,
    "id": 3,
    "name": "GHI",
    "value": "3"
  }
]

选择的字符串数组 #

const selectedArray = [
  "ABC",
  "DEF"
]

期望结果 #

const newArray = [
  {
    "active": true,
    "id": 1,
    "name": "ABC",
    "value": "1"
  },
  {
    "active": true,
    "id": 2,
    "name": "DEF",
    "value": "2"
  },
  {
    "active": false,
    "id": 3,
    "name": "GHI",
    "value": "3"
  }
]

现有实现 #

以下是我已经实现并能正常运行的代码：

const arrCopy = [...defaultArray]
arrCopy.forEach(x => x.active = false)
arrCopy.forEach(x => {
    if(selectedArray.includes(x.name))
        x.active =  true
})

console.log(arrCopy)

更标准的优化实现 #

方案1：一次遍历+Set提升查找性能 #

// 将选择数组转为Set，把查找时间复杂度从O(n)降到O(1)
const selectedSet = new Set(selectedArray);
// 生成新数组，不修改原对象（符合数据不可变性最佳实践）
const newArray = defaultArray.map(item => ({
  ...item,
  active: selectedSet.has(item.name)
}));

console.log(newArray);

方案2：直接修改原数组元素（业务允许时） #

如果不需要保留原对象的active状态，可以直接在数组拷贝上一次遍历完成：

const selectedSet = new Set(selectedArray);
const arrCopy = [...defaultArray];
arrCopy.forEach(item => {
  item.active = selectedSet.has(item.name);
});

console.log(arrCopy);

优化点说明 #

1. 性能优化：使用Set替代数组的includes方法，大幅提升查找效率，尤其在选择数组元素较多时效果明显。
2. 代码精简：将两次遍历合并为一次，减少冗余操作，逻辑更紧凑。
3. 可选的不可变性：方案1通过解构创建新对象，不会修改原数组中的对象，适合需要保留原始数据的场景；方案2直接修改对象属性，更适合无需保留原始状态的业务场景。

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