本文介绍在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主要用于查找第一个匹配项，但此处通过执行回调函数并配合外部计数器变量，也能实现统计次数的功能。
总结
以上为个人经验分享，旨在提供参考，也希望大家多多支持本站。