如何为动态对象数组补全缺失属性并将缺失值填充为0

实现思路 #

• 第一步：提取数组中所有对象出现过的属性名，去重得到全量属性集合
• 第二步：遍历数组内的每个对象，检查是否包含所有全量属性，对缺失的属性赋值为0

该方案支持动态场景，无论后续数组中新增多少种属性，都可以自动完成全量补全，不需要手动修改属性配置。

代码实现（JavaScript） #

// 原数组
const originArr = [
  {"Header":"1","Apples":10},
  {"Header":"2","Apples":10, "Oranges":153},
  {"Header":"3","Oranges":280, "Pears":200},
  {"Header":"4","Oranges":1165}
]

// 1. 收集所有出现过的属性，去重
const allKeys = [...new Set(originArr.flatMap(item => Object.keys(item)))]

// 2. 遍历补全属性
const result = originArr.map(item => {
  // 浅拷贝避免修改原对象
  const newItem = {...item}
  allKeys.forEach(key => {
    // 缺失属性则赋值为0
    if(newItem[key] === undefined) {
      newItem[key] = 0
    }
  })
  return newItem
})

console.log(result)

输出结果验证 #

运行代码后得到的result和需求目标结构完全一致：

[
  {"Header":"1","Apples":10, "Oranges":0, "Pears":0},
  {"Header":"2","Apples":10, "Oranges":153, "Pears":0},
  {"Header":"3","Apples":0, "Oranges":280, "Pears":200},
  {"Header":"4","Apples":0, "Oranges":1165,"Pears":0}
]

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