JavaScript - 减少数组和 groupBy [重复]答案

【问题标题】：JavaScript - Reduce array and groupBy [duplicate]JavaScript - 减少数组和 groupBy [重复]
【发布时间】：2020-09-25 02:31:41
【问题描述】：

假设我有这个简单的数组：

[{
    color: "red",
    swatches: 6
}, {
    color: "green",
    swatches: 10
}, {
    color: "green",
    swatches: 10
}, {
    color: "red",
    swatches: 9
}, {
    color: "green",
    swatches: 10
}, {
    color: "blue",
    swatches: 5
}]

我如何使用.reduce() 和.filter() 来添加swatches 的计数并按color 分组，所以你会得到这样的东西：

[{
    color: "red",
    swatches: 15
}, {
    color: "green",
    swatches: 30
}, {
    color: "blue",
    swatches: 5
}]

您可能会在上面使用forEach，然后检查它是否已添加到其中，但也许使用 ES6 方式更好？请不要乱码。

【问题讨论】：

有一个问题......你根本没有尝试解决你自己的问题
@JaromandaX 我一直在玩 JSBin，我有一个解决方案，但它非常糟糕，所以我在线询问。
重点是在问题中显示您的尝试 - 否则问题看起来像是对代码的请求：p
@test 即使你拥有的东西很糟糕，总比没有好。当您将要求粘贴到问题中时，人们往往会对 SO 做出负面反应。让您看起来好像什么都没尝试，只是将 SO 用作代码编写服务。在你的情况下，情况并非如此，但怎么会有人知道？
Stack Overflow 旨在为您实际编写的代码问题寻找帮助。此问题明确要求为您编写代码。

标签： javascript

【解决方案1】：

这是一个只使用 ES6 函数的解决方案，看起来很简洁，但不如我想象的 forEach 快。

const data = [{
   color: "red",
   swatches: 6
}, {
   color: "green",
   swatches: 10
}, {
   color: "green",
   swatches: 10
}, {
   color: "red",
   swatches: 9
}, {
   color: "green",
   swatches: 10
}, {
   color: "blue",
   swatches: 5
}];

const result = Object.entries(
   data.reduce((acc, { color, swatches }) => ({ ...acc, [color]: (acc[color] ?? 0) + swatches }), {})
).map(([color, swatches]) => ({ color, swatches }));

console.log(result);

【讨论】：

优雅 - 简直就是一个班轮！ - 除非您正在处理包含数百万个条目的数组，否则速度不会成为一个因素
我能问一下，为什么使用?? 而不是|| - 我明白其中的区别，但不是原因
因为这个问题的主题似乎是用 ES6 来实现它。所以我决定用??而不是||来展示更多的可能性。
很公平 - 正如我所说，优雅的答案?
PS: object spread ({...acc, ), Object.entries() and ?? 不是 ES6, Object.entries() 是 ES8, object spread 是 ES9 而 Nullish Coalescing Operator 是 ES11 ;)跨度>