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

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

以下是我们可以用来解决查找重复项问题的几种方法或途径：

让我们讨论以上所有方法，以在 JavaScript 数组中查找重复项：

简单遍历数组

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

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

算法

  • 步骤 1 - 首先，我们需要创建一个 JavaScript 数组，我们将在其中搜索重复元素。
  • 步骤 2 - 我们将创建一个新的空数组，用于保存原始数组中重复的项。
  • 步骤 3 - 在下一步中，我们将创建一个 JavaScript 函数，其中包含使用嵌套 for 循环查找重复项的原始逻辑，并使用重复的值更新上一步中创建的新数组。更新新数组后，它将返回该数组。
  • 步骤 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 作为原始数组，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 中所有值的 set。之后，我们使用 filter() 函数，其中array 使用has() 方法与uniqueSet 检查重复值，它将返回从数组中删除与 uniqueSet 和 array 中的公共项后剩余的所有值。

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

更新于： 2023年9月2日

70K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告