如何在javascript中的对象数组中分组和添加它们的值？答案

【问题标题】：How to group and add their value in array of objects in javascript?如何在javascript中的对象数组中分组和添加它们的值？
【发布时间】：2019-06-13 10:28:16
【问题描述】：

我的 Angular 应用程序中有此响应。我必须减少代码。

res=[
{  "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": 04 },
{  "url": "/page3", "views": 14 },
]

我需要像

这样的最终回复

res=[
{  "url": "/page1", "views": 104 },
{  "url": "/page2", "views": 104 },
{  "url": "/page3", "views": 104 },
]

【问题讨论】：

欢迎来到 Stack Overflow！请注意，这是一个问答网站，而不是代码编写服务。另请参阅如何How to Ask。
RTFM Array reduce()
接受的答案返回一个对象，而不是您在问题中提到的数组输出

标签： javascript arrays angular typescript object

【解决方案1】：

接受的答案返回一个对象。您可以使用reduce 执行类似的操作来获得所需的输出：

const res=[{"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":04},{"url":"/page3","views":14}],

merged = res.reduce((acc,{url,views})=> {
    acc[url] = acc[url] || {url, views:0}
    acc[url].views += views;
    return acc;
}, {}),

output = Object.values(merged)
console.log(output)

以下是上述代码的简短版本：

const res=[{"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":04},{"url":"/page3","views":14}],

output = res.reduce((acc,{url,views})=>
    ((acc[url] = acc[url] || {url, views:0})["views"] += views, acc), {})
console.log(Object.values(output))

另一个使用Map的选项

const res=[{"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":04},{"url":"/page3","views":14}],

map = res.reduce((m,{url,views})=> {
    const o = m.get(url) || {url,views:0};
    o.views += views;
    return m.set(url, o);
}, new Map),

output = [...map.values()];
console.log(output)

【讨论】：

【解决方案2】：

使用数组reduce()

var result = res.reduce((accu, obj) => {
       accu[obj.url] = (accu[obj.url] || 0) + obj.views;
       return accu;
    },
    {}
);

节点 CLI 的输出：

> var result = res.reduce((accu, obj) => { accu[obj.url] = (accu[obj.url] || 0) + obj.views; return accu; }, {});
undefined
> result
{ '/page1': 16, '/page2': 5, '/page3': 29 }

【讨论】：

【解决方案3】：

可以使用简单的reduce操作：

 

var res = [
{  "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": 04 },
{  "url": "/page3", "views": 14 },
];

res = res.reduce((val, acc) => {
if (acc.some(e => e.url == val.url)) {
    acc.find(e => e.url == val.url).views += val.views;
} else {
    acc.push({
        url: val.url,
        views: val.views,
    });
}
return acc;
}, []);

console.log(res);

【讨论】：