本文介绍了如何使用 JavaScript 统计字符串数组中每个单词出现的次数，并将结果转换为一个包含 `fruit` 和 `numberOfOccurences` 属性的对象数组。通过 `reduce` 方法，可以高效地实现这一功能，避免使用嵌套循环，提高代码的可读性和性能。
在 JavaScript 中，统计数组中每个元素出现的次数是一个常见的需求。通常，我们需要将结果转换为一种易于使用和理解的格式，例如对象数组。本文将介绍如何使用 reduce 方法来实现这一目标，并提供详细的代码示例和解释。
使用 reduce 方法统计单词出现次数
reduce 方法是 JavaScript 数组的一个强大工具，它可以将数组中的所有元素归约为单个值。在本例中，我们将使用 reduce 方法来构建一个对象，其中键是数组中的单词，值是该单词出现的次数。然后，我们将把这个对象转换为一个对象数组，其中每个对象都包含 fruit 和 numberOfOccurences 属性。
以下是实现此功能的代码：
const fruits = ['apple', 'orange', 'apple', 'apple', 'pear', 'pear'];
const stats = Object.values(fruits.reduce((acc, fruit) => {
acc[fruit] ??= { fruit, num: 0 };
acc[fruit].num++;
return acc;
}, {}));
console.log(stats);代码解释
- fruits 数组： 这是包含要统计的单词的字符串数组。
-
reduce((acc, fruit) => { ... }, {})： reduce 方法接受两个参数：
- 一个回调函数，该函数对数组中的每个元素执行。
- 一个初始值（在本例中是一个空对象 {}），它将作为累加器 acc 的初始值。
- acc[fruit] ??= { fruit, num: 0 };： 这是关键的一步。它检查累加器 acc 中是否已经存在以当前单词 fruit 为键的属性。如果不存在，则使用空合并运算符 ??= 创建一个新的对象 { fruit, num: 0 }，并将其赋值给 acc[fruit]。 这样确保每个单词在 acc 中都有一个对应的计数器。
- acc[fruit].num++;： 如果 acc[fruit] 已经存在（即单词已经出现过），则将该单词的计数器 num 递增 1。
- return acc;： 回调函数必须返回累加器 acc，以便在下一次迭代中使用。
- Object.values( ... )： reduce 方法返回的是一个对象，该对象以单词为键，以包含单词和计数器的对象为值。为了获得题目要求的对象数组，我们使用 Object.values() 方法提取对象的所有值，并将它们放入一个数组中。
输出结果
运行上面的代码，将得到以下输出：
[
{
"fruit": "apple",
"num": 3
},
{
"fruit": "orange",
"num": 1
},
{
"fruit": "pear",
"num": 2
}
]注意事项
- reduce 方法是一个强大的工具，可以用于各种数组操作。
- 空合并运算符 ??= 是一种简洁的语法，用于在属性不存在时设置默认值。
- Object.values() 方法可以将对象的值提取到数组中。
总结
通过使用 reduce 方法和空合并运算符，我们可以高效地统计数组中单词的出现次数，并将结果转换为一个易于使用的对象数组。这种方法避免了使用嵌套循环，提高了代码的可读性和性能。希望本文能够帮助你理解如何在 JavaScript 中处理数组数据。
