JavaScript 统计数组中所有项的出现次数

在本文中，我们将看到如何统计JavaScript数组中所有项的出现次数。做到这一点的最常见方法之一是使用传统的 for循环 。在JavaScript中，我们还有另一种现代的方法来遍历数组，即使用 forEach 方法。

以下是统计数组中所有项出现次数的方法：

• **使用JavaScript **forEach()方法
• **使用 **reduce()方法
• **使用 **filter()方法
• **使用 **for…of循环方法

方法1：使用JavaScript forEach() 方法：

arr.forEach() 方法对数组的每个元素调用一次提供的函数。提供的函数可以对给定数组的元素执行任何类型的操作。

语法：

array.forEach(callback(element, index, arr), thisValue)

例子： 在这个例子中，我们将使用forEach()方法遍历数组的元素并统计数组中所有元素出现的次数，并将它们打印在控制台中。

JavaScript

let arr = [
    'geeks', 2, 'geeks', 2, 'Javascript', 4,
    'Javascript', 5, 'for', 6, 'Javascript', 1,
    'for', 5, 7, 8, 'for'
];
 
const counter = {};
 
arr.forEach(ele => {
    if (counter[ele]) {
        counter[ele] += 1;
    } else {
        counter[ele] = 1;
    }
});
 
console.log(counter)

输出

{
    '1': 1,
    '2': 2,
    '4': 1,
    '5': 2,
    '6': 1,
    '7': 1,
    '8': 1,
    geeks: 2,
    Javascript: 3,
    for: 3
}

方法2：使用reduce()方法：

JavaScript的 arr.reduce() 方法用于将数组减少为一个单一值，并对数组的每个值（从左到右）执行提供的函数，并将函数的返回值存储在累加器中。

语法：

array.reduce( 
    function(total, currentValue, currentIndex, arr), 
    initialValue 
)

示例: 在这个示例中，我们将使用reduce()方法迭代数组的元素，并统计数组中所有元素的发生次数，并将其打印在控制台上。

Javascript

const arr = [
    'geeks', 2, 'geeks', 2, 'Javascript', 4,
    'Javascript', 5, 'for', 6, 'Javascript', 1,
    'for', 5, 7, 8, 'for'
];
 
let count = arr.reduce(function (value, value2) {
    return (
        value[value2] ? ++value[value2] :(value[value2] = 1),
        value
    );
}, {});
 
console.log(count);

输出

{
    '1': 1,
    '2': 2,
    '4': 1,
    '5': 2,
    '6': 1,
    '7': 1,
    '8': 1,
    geeks: 2,
    Javascript: 3,
    for: 3
}

方法3： 使用filter()方法：

JavaScript Array filter() 方法用于从给定数组中创建一个新数组，该新数组只包含满足参数方法设置的条件的元素。

语法：

array.filter(callback(element, index, arr), thisValue)

例子： 在这个例子中，我们将使用数组的filter()方法来检查数组元素的出现次数，并将它们打印在控制台上。

JavaScript

const arr = [
    'geeks', 2, 'geeks', 2, 'Javascript', 4,
    'Javascript', 5, 'for', 6, 'Javascript', 1,
    'for', 5, 7, 8, 'for'
];
 
const itemCounter = (value, index) => {
    return value.filter((x) => x == index).length;
};
 
console.log(itemCounter(arr, 'geeks'))

输出

2

方法4：使用for…of循环：

for…of循环遍历可迭代对象（例如Array、Map、Set、arguments对象等），通过自定义的迭代钩子调用语句来执行每个不同属性的值。

语法：

for ( variable of iterableObjectName) {
    ...
}

示例： 在此示例中，我们将使用for…of循环遍历数组的元素，计算数组中所有元素出现的次数，并将它们打印到控制台中。

Javascript

const arr = [
    'geeks', 2, 'geeks', 2, 'Javascript', 4,
    'Javascript', 5, 'for', 6, 'Javascript', 1,
    'for', 5, 7, 8, 'for'
];
 
const count = {};
 
for (let ele of arr) {
    if (count[ele]) {
        count[ele] += 1;
    } else {
        count[ele] = 1;
    }
}
 
console.log(count);

输出

{
    '1': 1,
    '2': 2,
    '4': 1,
    '5': 2,
    '6': 1,
    '7': 1,
    '8': 1,
    geeks: 2,
    Javascript: 3,
    for: 3
}