MOBA英雄Counter应用：找出二级对象数组中高频Counter名称

步骤1：统计所有Counter的出现频率 #

首先遍历所有英雄的Counter列表，统计每个英雄名称的出现次数，同时保留对应的disadvantage数据（示例取该英雄Counter中最大的劣势值，可根据需求调整为平均值/最新值等）：

// 收集所有英雄的Counter列表并扁平化
const allCounters = activeHeroes.flatMap(hero => hero.counters);

// 用Map统计每个Counter的出现次数及相关数据
const counterStatsMap = new Map();

allCounters.forEach(counter => {
  const currentDisadvantage = parseFloat(counter.disadvantage.replace('%', ''));
  
  if (counterStatsMap.has(counter.name)) {
    const existing = counterStatsMap.get(counter.name);
    existing.count += 1;
    // 保留最大的劣势值
    if (currentDisadvantage > parseFloat(existing.disadvantage.replace('%', ''))) {
      existing.disadvantage = counter.disadvantage;
    }
  } else {
    counterStatsMap.set(counter.name, {
      ...counter,
      count: 1
    });
  }
});

步骤2：按出现次数排序Counter #

将统计后的Counter转换为数组，按出现次数降序排序；次数相同时，可按英雄名称升序排序保证展示一致性：

// 转换为数组并排序
const sortedUniversalCounters = Array.from(counterStatsMap.values()).sort((a, b) => {
  // 优先按出现次数降序
  if (b.count !== a.count) {
    return b.count - a.count;
  }
  // 次数相同则按名称升序
  return a.name.localeCompare(b.name);
});

步骤3：整合到现有代码中 #

场景1：展示全局通用Counter列表 #

如果需要单独展示整个团队的高频通用Counter，编写新的渲染函数：

const renderUniversalCounters = () => {
  // 过滤出正劣势的Counter（和现有逻辑一致）
  const positiveCounters = sortedUniversalCounters.filter(counter => 
    parseFloat(counter.disadvantage.replace('%', '')) >= 0.00
  );

  return positiveCounters.map(counter => (
    <div className="relative-el" key={counter.name}>
      <img 
        className="hero-image" 
        src={`/assets/images/${replaceHeroName(counter.name)}.png`} 
        alt={counter.name} 
        width={86} 
      />
      <p className="absolute-statistic">{counter.disadvantage}</p>
      {/* 可选：展示该Counter的出现次数 */}
      <p className="counter-count">出现次数：{counter.count}</p>
    </div>
  ));
};

// 在组件中调用即可展示：{renderUniversalCounters()}

场景2：在单个英雄的Counter列表中置顶高频通用Counter #

如果需要保持每个英雄的Counter列表，但将全局高频的Counter排在前面，修改现有generateCounters函数：

const generateCounters = (hero) => {
  const positiveCounters = hero.counters.filter(counter => 
    parseFloat(counter.disadvantage.replace('%', '')) >= 0.00
  );

  // 按全局出现次数排序当前英雄的Counter
  const sortedHeroCounters = positiveCounters.sort((a, b) => {
    const countA = counterStatsMap.get(a.name)?.count || 0;
    const countB = counterStatsMap.get(b.name)?.count || 0;
    return countB - countA;
  });

  return sortedHeroCounters.map(counter => (
    <div className="relative-el" key={counter.name}>
      <img 
        className="hero-image" 
        src={`/assets/images/${replaceHeroName(counter.name)}.png`} 
        alt={counter.name} 
        width={86} 
      />
      <p className="absolute-statistic">{counter.disadvantage}</p>
    </div>
  ));
};

注意事项 #

• 如果是React函数组件，建议在useEffect中初始化counterStatsMap和sortedUniversalCounters，避免重复计算
• 渲染列表时必须添加唯一key属性，符合React的渲染规范
• 可根据业务需求调整disadvantage的保留逻辑（比如取平均值、最新值等）

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