JavaScript中如何根据匹配键值为对象数组元素添加对应属性

核心思路 #

不推荐写嵌套双层循环遍历匹配（数据量大时性能差），优先先将规则数组转换为以匹配字段为键的映射结构，将单条匹配查找的时间复杂度从O(n)降到O(1)，整体逻辑时间复杂度为O(m+n)，性能更优，扩展性也更好。

具体实现代码 #

推荐写法（不修改原数组，ES6+ 语法） #

// 第一步：构建name字段到对应配置值的映射
const configMap = new Map(
  array2.map(ruleItem => [ruleItem.name, ruleItem.isCanceled])
)

// 第二步：遍历目标数组，追加属性生成新结果数组
const resultArray = array1.map(targetItem => ({
  ...targetItem,
  isCanceled: configMap.get(targetItem.name)
  // 若存在name匹配不到规则的场景，可通过空值合并设置默认值，例如末尾加 ?? false
}))

兼容旧环境写法（无Map/展开运算符） #

如果需要兼容不支持ES6特性的运行环境，可以用普通对象做映射，用Object.assign实现属性拷贝：

// 构建普通对象形式的映射
var config = {}
for (var i = 0; i < array2.length; i++) {
  config[array2[i].name] = array2[i].isCanceled
}

var resultArray = []
for (var j = 0; j < array1.length; j++) {
  var current = array1[j]
  resultArray.push(Object.assign({}, current, {
    isCanceled: config[current.name]
  }))
}

直接修改原数组的写法 #

如果业务场景不需要保留原数组的原始结构，可以直接遍历原数组赋值，省略对象拷贝的开销：

const configMap = new Map(array2.map(item => [item.name, item.isCanceled]))
array1.forEach(item => {
  item.isCanceled = configMap.get(item.name)
})
// 执行完成后array1就是最终需要的结果数组

扩展说明 #

如果后续规则数组需要追加更多要同步的属性（比如除了isCanceled还要加role、tag等字段），不需要修改遍历逻辑，直接把映射存储整个规则对象即可：

// 多属性自动同步写法
const configMap = new Map(array2.map(rule => [rule.name, rule]))
const resultArray = array1.map(item => ({
  ...item,
  ...configMap.get(item.name)
}))

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