Angular实现列表高频前3位数字统计及HTML展示问题

原代码问题分析 #

你当前的代码逻辑错误，它是在比较整个对象是否完全相等，而非提取每个对象里的boule系列数字统计出现频率，所以无法得到正确结果。

正确实现步骤与代码 #

TypeScript 部分

public fakeJson = [
  {
    id: 1,
    boule1: 2,
    boule2: 27,
    boule3: 11,
    boule4: 50,
    boule: 39
  },
  {
    id: 2,
    boule1: 5,
    boule2: 27,
    boule3: 18,
    boule4: 44,
    boule: 31
  },
];

public top3Numbers: number[] = [];

constructor() {
  this.top3Numbers = this.getHighestOccurrence();
}

getHighestOccurrence(): number[] {
  // 1. 提取所有boule相关数字（排除id）
  const allNumbers: number[] = [];
  this.fakeJson.forEach(item => {
    allNumbers.push(item.boule1, item.boule2, item.boule3, item.boule4, item.boule);
  });

  // 2. 统计每个数字的出现频率
  const frequencyMap = new Map<number, number>();
  allNumbers.forEach(num => {
    frequencyMap.set(num, (frequencyMap.get(num) || 0) + 1);
  });

  // 3. 按频率降序排序，频率相同则按数字升序排列
  const sortedEntries = Array.from(frequencyMap.entries()).sort((a, b) => {
    if (b[1] !== a[1]) {
      return b[1] - a[1];
    }
    return a[0] - b[0];
  });

  // 4. 提取前3个高频数字
  return sortedEntries.slice(0, 3).map(entry => entry[0]);
}

HTML 展示部分

在组件模板中添加以下代码，即可渲染结果：

<h3>出现频率最高的3个数字</h3>
<div *ngIf="top3Numbers.length > 0">
  <ul>
    <li *ngFor="let num of top3Numbers; let idx = index">
      {{ idx + 1 }}. {{ num }}
    </li>
  </ul>
</div>
<div *ngIf="top3Numbers.length === 0">
  暂无数据
</div>

代码说明 #

• 提取数字：直接指定boule系列字段，精准获取需要统计的数字，避免混入id等无关数据。
• 频率统计：使用Map存储数字与对应出现次数，操作更高效且支持数字类型的键。
• 排序逻辑：优先按出现次数降序排列，次数相同时按数字升序排列，保证结果的合理性与稳定性。
• HTML 渲染：通过Angular的*ngFor循环展示结果，同时处理空数据的情况。

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