如何统计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>