如何在JavaScript中为对象数组的每个元素添加对应不同的属性值

实现代码（JavaScript环境） #

首先定义你提供的两个原始数组：

// 第一个对象数组
const data = [
  {"name":"Jane Doe", "age":28, "title":"Manager"},
  {"name":"James Brown", "age":20, "title":"Intern"},
  {"name":"Irene Vargas", "age":35, "title":"Accountant"}
]

// 第二个额外信息数组
const extraInfo = [
  {"experience": "7 years", "hobby": "Music"},
  {"experience": "6个月", "hobby": "电子游戏"},
  {"experience": "15年", "hobby": "跳伞"}
]

// 翻译映射表，可根据实际需求修改
const translateMap = {
  'Manager': 'Manager',
  'Intern': '实习生',
  'Accountant': '会计',
  '7 years': '7年',
  'Music': '音乐'
}

方案1：不修改原数组，返回新合并数组（推荐）

const mergedResult = data.map((item, index) => {
  // 按下标合并两个对象
  const mergedItem = {...item, ...(extraInfo[index] || {})}
  // 处理字段翻译
  Object.keys(mergedItem).forEach(key => {
    if (translateMap[mergedItem[key]]) {
      mergedItem[key] = translateMap[mergedItem[key]]
    }
  })
  return mergedItem
})

console.log(mergedResult)

方案2：直接修改原数组

如果不需要保留原始的data数组，可以直接遍历修改：

data.forEach((item, index) => {
  // 合并额外属性到原对象
  Object.assign(item, extraInfo[index] || {})
  // 处理翻译
  Object.keys(item).forEach(key => {
    if (translateMap[item[key]]) {
      item[key] = translateMap[item[key]]
    }
  })
})

console.log(data)

注意事项 #

• 代码里加了extraInfo[index] || {}的兼容逻辑，就算两个数组长度不一致也不会报错
• 如果不需要翻译功能，直接删掉所有和translateMap相关的代码即可
• 相同属性名的情况下，第二个数组的值会覆盖第一个数组的原有值

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