如何在JavaScript中对对象数组按URL分组并汇总views值（Angular场景）

嘿，我来帮你搞定这个数据处理需求！看起来你需要把相同url对应的views值合并（应该是累加吧？你给出的示例结果里所有views都是104，大概率是笔误啦），下面我会给出两种方案：一种是正确的累加逻辑，另一种是如果真的需要所有views固定为104的特殊处理。

方案一：合并相同URL的浏览量（累加求和） #

首先要注意，你原始数据里的"views": 04是不合法的JSON格式（JSON不允许数字带前导零），得先改成4才能正常解析。接下来用Array.reduce()就能简洁地完成聚合：

// 修正后的原始响应数据
const rawResponse = [
 { "url": "/page1", "views": 2 },
 { "url": "/page2", "views": 1 },
 { "url": "/page1", "views": 10 },
 { "url": "/page2", "views": 4 },
 { "url": "/page3", "views": 1 },
 { "url": "/page2", "views": 0 },
 { "url": "/page3", "views": 14 },
 { "url": "/page1", "views": 4 },
 { "url": "/page3", "views": 14 },
];

// 用reduce聚合数据
const processedResponse = Object.values(rawResponse.reduce((accumulator, currentItem) => {
  // 检查当前URL是否已经在累加器中
  if (accumulator[currentItem.url]) {
    // 累加浏览量
    accumulator[currentItem.url].views += currentItem.views;
  } else {
    // 初始化新的URL条目
    accumulator[currentItem.url] = { ...currentItem };
  }
  return accumulator;
}, {} as Record<string, { url: string; views: number }>));

console.log(processedResponse);
// 输出结果：
// [
//  { "url": "/page1", "views": 16 },
//  { "url": "/page2", "views": 5 },
//  { "url": "/page3", "views": 29 },
// ]

代码解释： #

• reduce是处理这类数据聚合的高效工具，它会遍历数组并维护一个以URL为键的累加器对象
• 每次遍历判断当前URL是否已存在：存在则累加views，不存在则新增条目
• 最后用Object.values()把累加器对象转换成你需要的数组格式

方案二：强制所有URL的views为104（特殊需求） #

如果你的示例结果不是笔误，确实需要所有条目views固定为104，那代码会更简单：

const processedResponse = [...new Set(rawResponse.map(item => item.url))].map(url => ({
  url,
  views: 104
}));

代码解释： #

• new Set(rawResponse.map(item => item.url))先提取所有唯一的URL
• 用扩展运算符...把Set转成数组，再遍历每个URL生成固定views为104的对象

在Angular组件/服务中使用 #

如果是在Angular里处理接口返回的数据，直接把逻辑放到订阅回调里即可：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-page-views',
  templateUrl: './page-views.component.html'
})
export class PageViewsComponent {
  processedData: { url: string; views: number }[] = [];

  constructor(private http: HttpClient) {}

  loadPageViews() {
    this.http.get<{ url: string; views: number }[]>('/api/page-views').subscribe(rawRes => {
      // 这里用方案一的reduce逻辑处理
      this.processedData = Object.values(rawRes.reduce((acc, item) => {
        acc[item.url] = acc[item.url] 
          ? { ...acc[item.url], views: acc[item.url].views + item.views } 
          : { ...item };
        return acc;
      }, {}));
    });
  }
}

内容的提问来源于stack exchange，提问作者S. DANIEL DEEPAK