JavaScript中如何为二维数组内的对象批量添加指定键值对

原有代码错误排查 #

你的代码无法按预期运行，是因为存在以下几个问题：

• 语法错误：属性取值时多写了冗余的点，data.characters.[0][0].city 正确写法为 data.characters[0][0].city
• 变量名不匹配：原数据存储在data变量下，代码中误用未定义的items、costs变量，没有指向data.characters字段
• map无返回值：两层_.map的回调函数都没有返回处理后的对象/数组，最终无法组装出完整的目标结构
• 逻辑遗漏：没有保留原数据的show字段，只处理了characters部分，无法得到完整的目标对象

可直接运行的实现代码 #

原生JS实现（无外部依赖） #

不需要引入lodash，用原生语法即可实现需求，同时支持不修改原始数据：

const data = {
  "show": "Family Guy",
  "characters": [
      [{name: 'Peter', age: 40, city: 'Quahog'}],
      [{name: 'Louis', age: 30}],
      [{name: 'Chris', age: 16}],
      [{name: 'Stewie', age: 1}]
    ]
 };

// 取第一个角色的city作为默认填充值
const defaultCity = data.characters[0][0].city;
const result = {
  // 保留原数据的其他字段（比如show字段）
  ...data,
  characters: data.characters.map(charGroup => 
    charGroup.map(character => ({
      ...character,
      // 已有city则保留原有值，无city则填充默认值
      city: character.city ?? defaultCity
    }))
  )
}

如果允许直接修改原始数据（不需要保留原数据不变），可以用更简洁的遍历写法：

const defaultCity = data.characters[0][0].city;
data.characters.forEach(group => {
  group.forEach(character => {
    if (!character.city) character.city = defaultCity
  })
})
// 此时原data变量就是最终目标结果

Lodash 正确实现 #

如果项目中已经引入lodash，可以用lodash内置的工具方法实现，无需手动判断属性存在性：

const defaultCity = data.characters[0][0].city;
const result = {
  ...data,
  characters: _.map(data.characters, charGroup => 
    _.map(charGroup, character => 
      // _.defaults会自动补全对象不存在的属性，不会覆盖已有的city值
      _.defaults({}, character, { city: defaultCity })
    )
  )
}

注意：如果需要保留原始data数据不被修改，所有属性赋值操作都要在拷贝出的新对象/新数组上执行，不要直接修改原对象的属性。

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