极客笔记JavaScript 如何计算数组中重复名称的出现次数
在JavaScript中，数组是一组具有相同类型的元素，它们存储在相邻的内存位置中，可以使用索引到特殊标识符分别引用每个元素。
让我们考虑一个包含重复名称出现次数的数组。该数组如下所示 –
var details = [
{
studentName: "John",
studentAge: 23
},
{
studentName: "David",
studentAge: 24
},
{
studentName: "David",
studentAge: 20
}
]
现在我们要在数组中计算重复名称的出现次数。我们使用 reduce() 概念来完成这个任务。结果将会是如下所示：
John: 1
David: 2
让我们深入了解如何在数组中计算重复名称出现次数的文章。
使用reduce()
reduce()方法传入上一个元素计算的返回值，并依次对数组中的每个元素执行用户提供的”reducer”回调函数。在整个数组上运行reducer会产生一个单一的值作为最终结果。
语法
以下是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>
运行以上脚本后，事件会被触发，网页会显示一个数组以及其出现次数。