JavaScript中对比数组与对象键值生成合并新对象的实现方法

首先你给出的参考数组存在语法问题：同一个对象内重复声明name属性会导致前面的属性被覆盖，实际运行时只会保留最后一个name: "Flower"，正确的数组结构应为：

const nameList = [{ name: "Computer" }, { name: "Car" }, { name: "House" }, { name: "Flower" }]

你的已有键值对象为：

const existedObj = { 
  computer: { title: 'Computer', color: 'Black' }, 
  house: { title: 'House', color: 'Red' }
}

核心实现代码 #

直接用数组reduce方法遍历构建新对象即可，无需额外的对比去重逻辑：

const targetObj = nameList.reduce((acc, { name }) => {
  const key = name.toLowerCase()
  acc[key] = existedObj[key] || { title: name, color: '' }
  return acc
}, {})

逻辑说明 #

• 遍历数组每一条name数据，将name转为小写作为新对象的key，和已有对象的key格式保持对齐
• 已有对象中存在对应key时直接复用原有值，不存在时创建新对象，title取数组中的name值，color赋值为空字符串
• 最终返回的targetObj就是符合要求的结果

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