如何在 JavaScript 陣列中查詢重複值？

在本教程中，我們將討論如何使用不同的方法或途徑來找到 JavaScript 陣列 中的重複或重複值，以解決此問題。

以下是我們可以用來解決查詢重複項問題的幾種方法或途徑：

讓我們討論以上所有方法，以在 JavaScript 陣列中查詢重複項：

簡單遍歷陣列

使用巢狀 for 迴圈遍歷陣列以查詢重複項是最基本和最簡單的方法，它需要 O(n2) 時間和 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，新陣列為 newArr，findDuplicates() 方法將 陣列 作為引數，並使用兩個 巢狀 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>

在上面的示例中，陣列 是傳遞給 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>

在上面的示例中，陣列 是初始陣列，uniqueSet 是僅包含來自 陣列 的所有值的 set。之後，我們使用 filter() 函式，其中使用 has() 方法檢查 陣列 中是否存在與 uniqueSet 重複的值，它將返回從陣列中刪除在 uniqueSet 和陣列中通用的項後剩餘的所有值。

在本教程中，我們學習了三種在陣列中查詢重複值的不同方法，其中所有方法都返回與特定陣列關聯的重複值。

更新於：2023-09-02

70K+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.