如何按Page属性动态分组计算对象中total_sum总和并实现简洁写法？

需求说明 #

给定如下对象：

let returnObj = {
   test_on_Home_Page: {
     page: 'Home Page',
     total_sum: -141.16874354518953,
     top_url: null
   },
  test_on_Product_List: {
     page: 'Product List',
     total_sum: -147.16874354518953,
     top_url: null
   },
  testOther_on_Home_page: {
     page: 'Home Page',
     total_sum: -48.16874354518953,
     top_url: null
   },
}

需要按page属性对total_sum分组求和，最终得到格式如下的结果（去除page名称中的空格，数值保留指定小数位）：

{
  HomePage: -189.337487,
  ProductList: -147.168744
}

尝试过的代码及问题 #

• 静态写法：仅针对特定page（如"Cart"）求和，无法动态适配所有page：

let totalCart = 0;

for(let errorName of Object.keys(returnObj)){
    if(returnObj[errorName]['page'] == "Cart"){
    totalCart += returnObj[errorName]['total_sum'] 
    }
 }

• 错误的动态尝试：使用整个子对象作为键（而非page名称），且未处理初始值，导致结果异常：

let list = [];
 
for(let errorName of Object.keys(returnObj)){
   list[returnObj[errorName]] += returnObj[errorName]['total_sum']
   
   }

简洁实现方案 #

可以用Object.values()结合Array.reduce()实现极简的动态分组求和：

const result = Object.values(returnObj).reduce((acc, { page, total_sum }) => {
  const pageKey = page.replace(/\s/g, '');
  acc[pageKey] = Number(((acc[pageKey] || 0) + total_sum).toFixed(6));
  return acc;
}, {});

代码解释 #

1. Object.values(returnObj)：将原始对象的所有子对象提取为数组，方便遍历处理
2. reduce()：遍历数组，逐步构建分组求和结果
   • page.replace(/\s/g, '')：去除page名称中的空格，生成目标键名（如"Home Page"→"HomePage"）
   • acc[pageKey] || 0：若当前page尚未在结果对象中，初始化为0，避免出现NaN
   • Number(...).toFixed(6)：将求和结果保留6位小数，与示例格式匹配
3. 最终返回的acc就是分组求和后的目标对象

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