如何在JavaScript数组中查找重复值？

在本教程中，我们将讨论如何使用不同的方法或途径来解决此问题，即如何在JavaScript数组中查找重复或重复的值。

以下是解决查找重复值问题时可以使用的方法或途径列表：

通过简单遍历数组
使用filter()和indexOf()方法
使用Set对象和has()方法

让我们讨论上述所有方法来查找JavaScript数组中的重复值。

通过简单遍历数组

使用嵌套的for循环遍历数组来查找重复项是最基本和天真的方法，它需要 O(n 2)时间和 O(n) 额外空间来解决问题。

在此方法中，我们使用两个嵌套的for循环，其中第一个循环表示我们要在剩余数组中搜索重复项的数组项，而另一个循环将遍历剩余项的数组，并将其与第一个循环包含的项进行比较。

算法

步骤1 ：首先，我们需要创建一个JavaScript数组，在该数组中我们将搜索重复元素。
步骤2 ：我们将创建一个新的空数组，用于保存原始数组中重复的项。
步骤3 ：在下一步中，我们将创建一个包含使用嵌套的for循环查找重复项的原始逻辑的JavaScript函数，并更新先前步骤中创建的新数组，其中包含重复的值。更新新数组后，它将返回该数组。
步骤4 ：在最后一步中，我们将显示新数组中包含的项，因为这些值是原始数组中的重复值。

示例1

以下代码示例将展示如何在数组中获取重复的值。

<!DOCTYPE html>
<html>
<body>
   <h3>Finding duplicate values in a JavaScript array</h3>
   <p>Here, we will find the repeating values in the given array.</p>
   <p>Original array: [6, 9, 15, 6, 13, 9, 11, 15]</p>
   <p id="result"></p>
   <script>
      //simple traversal method
      let array = [6, 9, 15, 6, 13, 9, 11, 15];
      let index = 0, newArr = [];
      const length = array.length; // to get length of array
      function findDuplicates(arr) {
         for (let i = 0; i < length - 1; i++) {
            for (let j = i + 1; j < length; j++) {
            if (arr[i] === arr[j]) {
                  newArr[index] = arr[i];
                  index++;
               }
            }
         }
         return newArr;
      }
      document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + findDuplicates(array) + '</b>';
   </script>
</body>
</html>

在上面的例子中，我们将原始的 array 作为array，将新数组作为 newArr ， , findDuplicates()方法将 array 作为参数，并使用两个嵌套的for循环遍历它以找出数组中的重复项，并将 newArray 更新为原始数组中重复的或有重复的值。

使用filter()和indexOf()方法

这是一种在数组中找到重复项的最简短和最简单的方法，其中filter()方法遍历数组并根据定义的条件筛选项并返回一个新数组，而indexOf()方法返回通过的项的索引。

步骤

步骤1 - 在此步骤中，我们需要定义一个要操作的数组。
步骤2 - 定义包含使用filter()和indexOf()方法查找重复项逻辑的JavaScript函数。
步骤3 - 第三步包含在用户屏幕上显示输出数据的方式。

示例2

<!DOCTYPE html>
<html>
<body>
   <h3>Finding duplicate values in a JavaScript array</h3>
   <p>Here, we will find the repeating values in the given array.</p>
   <p>Original array: [1, 4, 8, 2, 4, 1, 6, 2, 9, 7]</p>
   <p id="result"></p>
   <script>
      // indexOf() and filter()
      var array = [1, 4, 8, 2, 4, 1, 6, 2, 9, 7];
      function findDuplicates(arr) {
         return arr.filter((currentValue, currentIndex) =>
         arr.indexOf(currentValue) !== currentIndex);
      }
      document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + findDuplicates(array) + '</b>';
   </script>
</body>
</html>

在上面的示例中， array 是传递给findDuplicates()方法的原始数组，filter()方法通过将当前索引 currentIndex 与 currentValue 在数组中的索引进行比较来过滤数组。

使用Set()对象和has()方法

在这种方法中，我们将使用JavaScript的 set 对象和has()方法，其中set对象允许我们存储任何类型的唯一值，has()方法用于检查当前数组元素是否存在于列表中。

步骤

步骤1 - 第一步是创建一个虚拟数组，并将唯一值设置为set对象。
步骤2 - 在下一步中，我们将使用filter()方法遍历和过滤数组，通过使用 has() 方法检查set是否包含当前元素。
步骤3 - 下一步是在用户屏幕上显示重复的元素。

示例3

<html>
<body>
   <p>Original array: [3, 8, 7, 5, 3, 9, 8]</p>
   <p id="result"></p>
   <script>
      // using set() and has() method
      const array = [3, 8, 7, 5, 3, 9, 8];
      const uniqueSet = new Set(array);
      const filteredElements = array.filter(currentValue => {
            if (uniqueSet.has(currentValue)) {
               uniqueSet.delete(currentValue);
            }
            else {
               return currentValue;
            }
         }
      );
      document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + filteredElements + '</b>';
   </script>
</body>
</html>

在上面的例子中， array 是初始数组， uniqueSet 是一个集合，其中包含了来自 array 的所有值，但只出现一次。之后，我们使用filter()函数，其中 array 通过 uniqueSet 使用has()方法检查重复值，并返回删除与uniqueSet和array中相同项后数组中剩余的所有值。

在本教程中，我们学习了三种不同的在数组中查找重复值的方法，所有方法都返回与特定数组相关的重复值。