对数组的对象进行分组和计数并创建新数组[重复]

Question

我正在使用 reactJS 并且有一个来自响应的动态对象数组，如下所示：

[{ year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "old" }, { year: 2016, origin: "EN", type: "used" }, { year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "broken" }, { year: 2016, origin: "EN", type: "used" } ]

动态数组最多可以有多种不同的类型，但我的仪表板中只有 3 种颜色可供使用（好的、警告、关键）。颜色用多次也没问题！

我想为我的仪表板创建一个新数组，以对我的响应进行分组和计数，并将其与颜色合并以获得以下结果：

[{ name: "new", value: 2, color: 'ok' }, { name: "old", value: 1, color: 'warning' }, { name: "broken", value: 1, color: 'critical' }, { name: "used", value: 2, color: 'ok' }]

所以，首先我需要对它们进行分组，对组中的对象进行计数，选择​​一种颜色，然后创建一个新数组。

（注意：我不想使用额外的 JavaScript 库，例如 LINQ.js）

你能帮帮我吗？

Answer 1

您可以使用reduce 将数组分组为一个对象。使用Object.values将对象转化为数组。

您可以使用类型作为键来定义对象的颜色。

let arr = [{ year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "old" }, { year: 2016, origin: "EN", type: "used" }, { year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "broken" }, { year: 2016, origin: "EN", type: "used" } ]	
let colors = {'new' : 'ok', 'old' : 'warning', 'broken' : 'critical', 'used' : 'ok'}

let result = Object.values(arr.reduce((c, {type}) => {
  c[type] = c[type] || {name: type,value: 0,color: colors[type]};
  c[type].value++;
  return c;
}, {}))

console.log(result);

---

随机选择颜色：

let arr = [{ year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "old" }, { year: 2016, origin: "EN", type: "used" }, { year: 2016, origin: "EN", type: "new" }, { year: 2016, origin: "EN", type: "broken" }, { year: 2016, origin: "EN", type: "used" } ]	
let colors = ['ok', 'warning', 'critical'];

let result = Object.values(arr.reduce((c, {type}) => {
  c[type] = c[type] || {name: type,value: 0,color: colors[Math.floor(Math.random() * colors.length)]};
  c[type].value++;
  return c;
}, {}))

console.log(result);