如何对JS对象数组中深层嵌套属性求和并添加到对应顶层对象

核心思路 #

遍历每个顶层对象，递归统计其下所有嵌套层级中values字段的val1、val2总和，将统计结果作为新字段挂载到顶层对象上，保留原数据结构不变。

代码实现 #

// 递归统计单个顶层对象下所有嵌套的val1、val2总和
function calcNestedTotal(target) {
  let totalVal1 = 0, totalVal2 = 0;
  // 匹配到values字段直接累加
  if (target.values) {
    totalVal1 += target.values.val1 || 0;
    totalVal2 += target.values.val2 || 0;
  }
  // 存在嵌套data数组则递归遍历所有子项
  if (Array.isArray(target.data)) {
    target.data.forEach(child => {
      const childTotal = calcNestedTotal(child);
      totalVal1 += childTotal.val1;
      totalVal2 += childTotal.val2;
    })
  }
  return { val1: totalVal1, val2: totalVal2 };
}

// 处理原始数组得到最终结果
const processedCollection = collection.map(topItem => {
  const sum = calcNestedTotal(topItem);
  // 展开原对象添加总和字段，不会修改原始数组
  return { ...topItem, ...sum };
})

结果验证 #

运行代码后得到的processedCollection完全符合要求：

• Top1的val1为876 + 654 + 676 = 2206，val2为3456 + 300 + 888 = 4644
• Top2的val1为111 + 100 + 600 = 811，val2为300 + 150 + 50 = 500

该实现兼容任意层级的data嵌套，只要最末层数据的values结构不变即可正常统计。如果不需要保留原始数组，可以直接遍历原数组给顶层对象新增属性，无需用map生成新数组。

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