如何将JavaScript对象数组按selected_color统计并转换为指定格式？

你可以通过统计颜色出现次数再转换为目标格式这两步来实现，下面是几种常用的写法：

方法1：使用 Array.reduce() 统计后转换 #

先利用reduce生成一个以颜色为键、次数为值的对象，再把这个对象转成目标数组：

const originalArray = [
  { "name": "A", "selected_color": "Red" },
  { "name": "B", "selected_color": "Green" },
  { "name": "C", "selected_color": "Blue" },
  { "name": "D", "selected_color": "Red" }
];

// 第一步：统计每个颜色的出现次数
const colorCount = originalArray.reduce((acc, item) => {
  const color = item.selected_color;
  // 如果当前颜色已在统计对象中，次数加1，否则初始化为1
  acc[color] = (acc[color] || 0) + 1;
  return acc;
}, {});

// 第二步：转换为目标格式的数组
const result = Object.entries(colorCount).map(([color, count]) => ({
  color,
  count: count.toString() // 按需求转为字符串类型
}));

console.log(result);

方法2：使用 Map 结构统计 #

Map的键值对结构天生适合这类统计，逻辑更直观：

const originalArray = [
  { "name": "A", "selected_color": "Red" },
  { "name": "B", "selected_color": "Green" },
  { "name": "C", "selected_color": "Blue" },
  { "name": "D", "selected_color": "Red" }
];

const colorMap = new Map();

// 遍历数组统计次数
originalArray.forEach(item => {
  const color = item.selected_color;
  colorMap.set(color, (colorMap.get(color) || 0) + 1);
});

// 转换为目标数组
const result = Array.from(colorMap, ([color, count]) => ({
  color,
  count: count.toString()
}));

console.log(result);

两种方法最终都会输出你需要的格式，若不需要count为字符串类型，去掉toString()即可。

内容的提问来源于stack exchange，提问作者Megamind