极客教程如何统计JavaScript数组中重复名称出现的次数
在JavaScript中，数组是一组相同类型的元素，它们存储在相邻的内存位置中，并且每个元素可以通过索引引用到一个特殊的标识符中。
让我们考虑一个由重复名称出现组成的数组。该数组如下所示─
var details = [
{
studentName: "John",
studentAge: 23
},
{
studentName: "David",
studentAge: 24
},
{
studentName: "David",
studentAge: 20
}
]
现在我们要统计数组中重复名称出现的次数。我们使用reduce()方法来完成。结果将如下所示─
John: 1
David: 2
让我们深入了解如何在数组中统计重复名称的出现次数。
使用reduce()
reduce()方法通过对前一个元素的计算返回值进行传递，并以顺序对数组的每个元素执行用户提供的“规约器”回调函数。在整个数组上运行约简器产生一个单一的结果值。
语法
以下是reduce()的语法─
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
为了更好地理解如何在数组中统计重复名称出现的次数，让我们看下面的例子。
示例
在下面的示例中，我们正在运行一个脚本，以及一个reduce()来打印重复名称出现的次数。
<!DOCTYPE html>
<html>
<body>
<script>
var array = [10, 22, 10, 25, 10, 67, 10, 68];
var search = 10;
var count = array.reduce(function(n, val) {
return n + (val === search);
}, 0);
document.write(count);
</script>
</body>
</html>
当脚本执行时，它将在网页上生成一个由数字“4”组成的输出，这是用于计算的值的次数。
示例
执行下面的代码以查看如何使用reduce()来获取重复名称出现的次数。
<!DOCTYPE html>
<html>
<body>
<script>
var details = [{
studentName: "John",
studentAge: 23
}, {
studentName: "David",
studentAge: 24
}, {
studentName: "John",
studentAge: 21
}, {
studentName: "John",
studentAge: 25
}, {
studentName: "Bob",
studentAge: 22
}, {
studentName: "David",
studentAge: 20
}]
var output = Object.values(details.reduce((obj, {
studentName
}) => {
if (obj[studentName] === undefined) obj[studentName] = {
studentName: studentName,
occurrences: 1
};
else obj[studentName].occurrences++;
return obj;
}, {}));
document.write(JSON.stringify(output));
</script>
</body>
</html>
在运行上述脚本时，输出窗口将弹出，显示由运行脚本引起的名称出现的次数。
让我们再看几个例子。
示例
考虑以下示例，这里我们声明了一个存储空对象的变量，并开始循环遍历数组并打印输出。
<!DOCTYPE html>
<html>
<body>
<script>
const array = ['ab', 'bc', 'ab', 'bc', 'cb'];
const count = {};
for (const element of array) {
if (count[element]) {
count[element] += 1;
} else {
count[element] = 1;
}
}
document.write(JSON.stringify(count));
</script>
</body>
</html>
当执行脚本时，事件被触发并在网页上提供重复元素出现次数及数组。
示例
让我们看下面的例子，在这里我们使用foreach来迭代数组并将出现次数存储在另一个变量中。
<!DOCTYPE html>
<html>
<body>
<script>
var array = [{
"car": "rx100",
"color": "black"
}, {
"car": "bmw",
"color": "grey"
}, {
"car": "rx100",
"color": "black"
}, ];
let b = {};
array.forEach(element => {
b[element.car] = (b[element.car] || 0) + 1;
})
document.write(JSON.stringify(b));
</script>
</body>
</html>
运行以上脚本后，事件被触发并在网页上显示数组及其出现次数。