JavaScript统计数组中指定值出现次数的多种实现方式
本文介绍在JavaScript中统计数组内指定值出现次数的四种常用方法。通过reduce累加、filter生成新数组求长度、forEach遍历统计以及find配合计数器等方式,对比各方案代码简洁度与执行逻辑,帮助开发者根据实际需求选择最优实现。
在JavaScript开发中,统计数组中特定元素出现的频次是一个常见需求。
需求
目标是从给定的数组中返回指定值出现的总次数。
- 输入条件为一个数组对象。
- 输出结果为目标待计数元素的出现次数。
代码
/*
传入一个数组 返回一个数组某值出现的次数
*/
const countOccurences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
console.log('[1,3,4,6,1,3,5,6,3,1]中 1 出现的次数是:'+countOccurences([1,3,4,6,1,3,5,6,3,1],1));
运行效果展示

一点想法
Array对象的reduce()方法接收两个关键参数:第一个是累加器total,第二个是初始值。
正确理解reduce()参数的用法至关重要,这将在后续处理更复杂的函数逻辑时发挥重要作用。
如何计算数组中某项的个数
<script type="text/javascript">
//统计一个数组中有多少个指定的数据项
var arr1= [12, 5, 8, 130, 44,5,51,5];
//方法一:
function count(arr,num){
var total = 0;
for (var i = arr.length - 1; i >= 0; i--) {
arr[i] === num ? total++ : ''
}
console.log(total)
}
count(arr1,5)
//方法二:
function count1(arr,num){
var countArr = arr.filter(function isBigEnough(value) {
return value === num;
});
console.log(countArr.length);
}
count1(arr1,5)
//方法三:
function count2(arr,num){
var i = 0;
arr.forEach(function(ele){
ele === num ? i++ : '';
})
console.log(i)
}
count2(arr1,5)
方法四:
function count3(arr,num){
var i = 0;
arr.find(function(ele){
ele === num ? i++ : '';
})
console.log(i)
}
count3(arr1,5)
</script>说明
方法一:利用for循环遍历数组,在循环体内通过三元运算符判断当前项是否等于指定值,若相等则对计数器进行累加,最终得到结果。
方法二:使用数组的filter方法筛选出所有满足条件的项,生成一个新数组,通过获取该新数组的长度即可得到计数结果。
方法三:利用数组的forEach方法,该方法会对数组中的每一项调用回调函数,其逻辑类似于for循环,随后对满足条件的项进行手动统计。
方法四:利用数组的find方法,虽然find主要用于查找第一个匹配项,但此处通过执行回调函数并配合外部计数器变量,也能实现统计次数的功能。
总结
以上为个人经验分享,旨在提供参考,也希望大家多多支持本站。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
