如何在 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+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.