从JS中的现有数组创建具有相应总数的对象数组

Question

采用以下数组：

["red", "red", "green", "red", "green", "blue"]

我想将其转换为包含出现次数的对象数组，例如：

[
 { name: red, count: 3 },
 { name: green, count: 2 },
 { name: blue, count: 1 },
]

如何使用Javascript实现？我使用Lodash库，如果有一个简单的解决方案，可以使用+1。

Answer 1

您要实现的是频率图。首先，您可以建立频率图。通过使用数组中的值作为键，您可以轻松地增加映射中的计数。

任何新添加的键的初始值为：((freq[val] || 0) + 1)。这只是意味着，获取最后一个值或0，然后增加1。

一旦有了地图，您就可以将其转换为名称/计数对数组。

let arr = ["red", "red", "green", "red", "green", "blue"];

let frequencyMap = arr.reduce((freq, val) => {
  return { ...freq, [val]: ((freq[val] || 0) + 1) }
}, {});

let results = Object.keys(frequencyMap).map(key => {
  return { name : key, count : frequencyMap[key] }
});

console.log(results);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 2

如果您乐于使用lodash，则可以使用_.countBy()来获取特定单词重复的次数：

{
  "red": 3,
  "green": 2,
  "blue": 1
}

然后使用_.map()映射此对象，以使键成为name属性值，并且该值成为count属性值：

const arr = ["red", "red", "green", "red", "green", "blue"];

const getFreq = _.flow(
  inp => _.countBy(arr),
  gr => _.map(gr, (count, name) => ({name, count}))
);

console.log(getFreq(arr));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Answer 3

[使用Array.reduce从一个空数组开始，在每次迭代中寻找一个当前值为name的对象，如果是，则增加计数，否则推送一个新对象：

const arr = ["red", "red", "green", "red", "green", "blue"];

const result = arr.reduce((acc, curr) => {
  const ndx = acc.findIndex(e => e.name === curr);

  if (ndx > -1) {
    acc[ndx].count++;
  } else {
    acc.push({
      name: curr,
      count: 1
    });
  }
  return acc;
}, []);

console.log(result);