JavaScript 中数组 API 怎么实现数组元素的频次统计-js教程-PHP中文网

javascript统计数组元素频次的核心思路是「遍历+计数」，常用reduce或foreach配合对象或map；对象适合基本类型但存在隐式转换问题，map支持任意键类型且更精确，封装函数可扩展支持keyfn预处理。

javascript 中数组 api 怎么实现数组元素的频次统计

JavaScript 中统计数组元素频次，核心思路是「遍历 + 计数」，常用 reduce 或 forEach 配合对象（或 Map）来记录每个值出现的次数。关键在于选择合适的数据结构和处理边界（如引用类型、NaN、undefined 等）。

用 reduce 构建频次对象（最常用）

适合基本类型（字符串、数字、布尔值），简洁清晰：

初始化一个空对象作为累加器，键为元素值，值为出现次数
每次遍历时，对当前元素的计数 +1；若首次出现，则设为 1
注意：对象键会自动转为字符串，所以 1 和 "1" 会被视为同一键（需按需处理）

示例：

const arr = ['a', 'b', 'a', 'c', 'b', 'a'];
const count = arr.reduce((acc, item) => {
  acc[item] = (acc[item] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

用 Map 实现更精确的频次统计（推荐处理复杂场景）

Map 支持任意类型作为键（包括对象、NaN、null），不会发生隐式类型转换，适合需要严格区分值类型的场景：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

用 new Map() 初始化，遍历时用 map.get(key) 获取当前计数，map.set(key, newValue) 更新
特别适合含 NaN 的数组：Map 能正确把 NaN 当作独立键，而普通对象中 obj[NaN] = 1 实际等价于 obj["NaN"]

示例：

const arr = [1, '1', NaN, NaN, null, undefined];
const count = arr.reduce((map, item) => {
  const current = map.get(item) || 0;
  map.set(item, current + 1);
  return map;
}, new Map());
// Map(5) { 1 => 1, '1' => 1, NaN => 2, null => 1, undefined => 1 }

封装成可复用函数（支持自定义键生成）

实际项目中常需灵活处理，比如统计对象数组中某个字段的频次，或对元素做预处理（忽略大小写、取整等）：

接受可选的 keyFn 参数，用于提取/转换元素为统计键
内部仍用 Map 保证健壮性，返回结果可转为对象或保持 Map 形式

示例（统计用户年龄频次）：

function countBy(arr, keyFn = x => x) {
  return arr.reduce((map, item) => {
    const key = keyFn(item);
    map.set(key, (map.get(key) || 0) + 1);
    return map;
  }, new Map());
}

const users = [{age: 25}, {age: 30}, {age: 25}, {age: 35}];
const ageCount = countBy(users, u => u.age);
// Map(3) { 25 => 2, 30 => 1, 35 => 1 }

注意事项与避坑点

避免常见错误，让统计更可靠：

不要直接用 {} 统计含 null、undefined、NaN 或对象的数组——它们会被转成字符串键，导致误合并
对象数组不能直接用 arr.reduce(...) 统计整个对象，因为对象引用不同，即使内容相同也被视为不同键；应先用 keyFn 提取唯一标识（如 id 字段）
若需排序输出（如按频次降序），可用 Array.from(map).sort(...) 转为数组再处理