统计对象数组中键的出现次数并转换为可用于React渲染的对象数组

核心实现代码 #

这个通用函数可以统计任意指定键的频次，并输出适合React等框架map渲染的对象数组：

function countUniqueItems(arr, targetKey) {
  // 用Map统计每个值的出现次数，避免普通对象键名的限制
  const frequencyMap = arr.reduce((acc, current) => {
    const value = current[targetKey];
    acc.set(value, (acc.get(value) || 0) + 1);
    return acc;
  }, new Map());

  // 将Map转换为目标结构的数组
  return Array.from(frequencyMap, ([value, count]) => ({
    [targetKey]: value,
    count: count
  }));
}

示例使用 #

输入数据

const inputArray = [
  { language: 'JavaScript' },
  { language: 'JavaScript' },
  { language: 'TypeScript' },
  { language: 'C++' }
];

调用函数

const result = countUniqueItems(inputArray, 'language');

输出结果

[
  { language: 'JavaScript', count: 2 },
  { language: 'TypeScript', count: 1 },
  { language: 'C++', count: 1 }
]

逻辑说明 #

1. 统计频次：使用reduce遍历输入数组，借助Map存储每个目标键值的出现次数——Map支持任意类型的键名，比普通对象更灵活（比如处理带特殊字符的键值）。
2. 转换结构：用Array.from将Map直接转换为数组，每个元素是包含原目标键和count属性的对象，完美适配React的map渲染需求。

React渲染示例 #

直接将结果用于列表渲染：

import { useState } from 'react';

function LanguageFrequencyList() {
  const [data] = useState([
    { language: 'JavaScript' },
    { language: 'JavaScript' },
    { language: 'TypeScript' },
    { language: 'C++' }
  ]);

  const frequencyData = countUniqueItems(data, 'language');

  return (
    <div className="stats-list">
      <h3>语言使用频次</h3>
      <ul>
        {frequencyData.map((item, idx) => (
          <li key={idx}>
            <span>{item.language}</span>
            <span className="count">({item.count}次)</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

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