首頁 >web前端 >js教程 >如何使用jQuery/JavaScript比較兩個JavaScript陣列物件？

如何使用jQuery/JavaScript比較兩個JavaScript陣列物件？

PHPz轉載: 2023-08-22 21:49:021361瀏覽

在JavaScript中，陣列是一個帶有索引作為鍵和陣列值作為陣列物件特定鍵的值的物件。有時，我們需要檢查兩個陣列是否相同。

我腦中首先想到的解決方案是使用等號運算符，像array1 == array2這樣比較。哎呀！這樣是行不通的，因為數組是一個對象，在JavaScript中我們不能直接比較兩個對象。所以，我們必須比較數組的每個元素。

在本教學中，我們將學習使用不同的方法來比較兩個JavaScript陣列物件。

Use the sort() method of JavaScript and compare every element

sort()方法允許我們在JavaScript中對陣列值進行排序。之後，我們可以使用for迴圈來比較數組中每個索引處的元素。如果任何索引處的元素不匹配，我們可以說這兩個數組物件是不同的。

Syntax

使用者可以依照下列語法使用sort()方法和for迴圈來比較兩個陣列物件。

// sort arrays first
arra1.sort();
array2.sort();
   if (array1.length != array2.length) {
      // arrays are not the same
   } else {
      for () {
         // if elements at index i are not the same, return false
      }
   }
}
// both arrays are the same

Algorithm

使用者可以按照以下演算法進行操作。

Step 1 − Use the sort() method to sort both arrays.
步驟2 - 比較兩個陣列的長度；如果長度不相同，則傳回false，表示兩個陣列不相同。
步驟 3 − 如果兩個陣列的長度相同，則使用for迴圈遍歷兩個陣列。
Step 4 − Compare the elements of both arrays at every index, and if the elements at the index don’t match, return false.
#步驟 5 - 如果兩個陣列中的所有元素都匹配，則兩個陣列相同。

Example

在下面的範例中，我們建立了兩個數字數組，並使用sort()方法對它們進行排序。然後，我們使用for迴圈來比較兩個陣列的每個元素。

In the output, users can see that both arrays are the same as both arrays contain the same values.

<html>
<body>
   <h3>Using the <i>array.sort()</i> method and <i>for</i> loop to check if two arrays are the same using JavaScript </h2>
   <button onclick = "checkArray()"> Compare arrays </button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = [32, 32, 54, 1, 2, 3, 4];
      let array2 = [1, 2, 3, 4, 32, 54, 32];
      output.innerHTML += "The first array values are " + array1 + "<br>";
      output.innerHTML += "The second array values are " + array2 + "<br>";
      function checkArray() {
         array1.sort();
         array2.sort();
         if (array1.length != array2.length) {
            output.innerHTML += "Both arrays are not same!";
            return false;
         } else {
            for (let i = 0; i < array1.length; i++) {
               if (array1[i] != array2[i]) {
                  output.innerHTML += "Both arrays are not same!";
                  return false;
               }
            }
         }
         output.innerHTML += "Both arrays are the same!";
         return true;
      }
   </script>
</body>
</html>

使用forEach迴圈和indexOf()方法

We can use the forEach loop to iterate through every array element. The indexOf() method finds the first occurrence of the element in the array and returns -1 if the reference array doesn’t contain the element.

#Syntax

使用者可以依照下列語法使用forEach迴圈和indexOf()方法來比較兩個陣列物件。

if (array2.length != array1.length) {
   // array are not the same
   return false;
} else {
   array1.forEach((element) => {
      if (array2.indexOf(element) == -1) {
         return false;
      }
   })
}

Algorithm

In this algorithm, we don’t need to sort the arrays like the first approach.

步驟 1 - 檢查兩個陣列的長度是否相同；如果不相同，則傳回 false。
Step 2 − If the lengths are the same, use the forEach() loop to iterate through every element.
#步驟 3 − 對於陣列1的每個元素，使用indexOf()方法檢查其是否存在於陣列2中。
第四步驟 - 如果indexOf()方法對於任何一個元素傳回-1，則表示兩個陣列不相同。

Example

In the example below, when the user clicks the button, it will invoke a compareArray() function. The compareArray() function compares the two arrays of string elements.

在輸出中，使用者可以觀察到兩個陣列不相同，因為兩個陣列的值是不同的。

<html>
<body>
   <h3>Using the <i>forEach() loop and indexOf() method</i> to check if two arrays are the same using JavaScript </h3>
   <button onclick = "compareArray()"> Compare arrays</button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = ["Hello", "Hi", "How"];
      let array2 = ["Are", "You", "!"];
      output.innerHTML += "The first array values are " + array1 + " <br>";
      output.innerHTML += "The second array values are " + array2 + " <br>";
      function compareArray() {
         var isSame = true;
         if (array2.length != array1.length) {
            output.innerHTML += "Both arrays are not same!";
            return false;
         } else {
            array2.forEach((element) => {
               if (array1.indexOf(element) == -1) {
                  isSame = false;
               }
            })
         }
         if (isSame) {
            output.innerHTML += "Both arrays are the same!";
         } else {
            output.innerHTML += "Both arrays are not same!";
         }
         return true;
      }
   </script>
</body>
</html>

我們已經學習了兩種不同的方法來比較JavaScript中的兩個陣列。使用者可以使用第一種方法來比較包含重複值的數組，而第二種方法只適用於比較包含唯一值的數組。

Also, users can use the JSON.stringify() method to compare the array of objects and sorted arrays.

以上是如何使用jQuery/JavaScript比較兩個JavaScript陣列物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript json jquery String Array if sort for foreach 循环 function 对象 this 算法

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用FabricJS向多邊形添加帶有圖像和顏色的圖案下一篇：使用FabricJS向多邊形添加帶有圖像和顏色的圖案

看更多