資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery/JavaScript 比較兩個 JavaScript 陣列物件？
在 JavaScript 中，陣列是一個物件，其索引作為鍵，陣列值作為陣列物件特定鍵的值。有時，我們需要檢查兩個陣列是否相同。
首先想到的解決方案是使用相等運算子並像 array1 == array2 那樣進行比較。糟糕！這行不通，因為陣列是一個物件，我們不能直接在 JavaScript 中比較兩個物件。因此，我們必須比較陣列的每個元素。
在本教程中，我們將學習使用各種方法比較兩個 JavaScript 陣列物件。
使用 JavaScript 的 sort() 方法並比較每個元素
sort() 方法允許我們對 JavaScript 中的陣列值進行排序。之後，我們可以使用 for 迴圈來比較陣列中每個索引處的元素。如果任何索引處的元素不匹配，我們可以說這兩個陣列物件是不同的。
語法
使用者可以按照以下語法使用 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
演算法
使用者可以按照以下演算法。
步驟 1 − 使用 sort() 方法對兩個陣列進行排序。
步驟 2 − 比較兩個陣列的長度；如果長度不同，則返回 false，表示兩個陣列不相同。
步驟 3 − 如果兩個陣列的長度相同，則使用 for 迴圈遍歷兩個陣列。
步驟 4 − 比較兩個陣列中每個索引處的元素，如果索引處的元素不匹配，則返回 false。
步驟 5 − 如果兩個陣列中的所有元素都匹配，則這兩個陣列相同。
示例
在下面的示例中，我們建立了兩個數字陣列並使用 sort() 方法對它們進行排序。之後，我們使用 for 迴圈比較兩個陣列的每個元素。
在輸出中，使用者可以看到這兩個陣列是相同的，因為兩個陣列包含相同的值。
<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() 方法
我們可以使用 forEach 迴圈遍歷每個陣列元素。indexOf() 方法查詢元素在陣列中的第一次出現，如果引用陣列不包含該元素，則返回 -1。
語法
使用者可以按照以下語法使用 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;
}
})
}
演算法
在此演算法中，我們不需要像第一種方法那樣對陣列進行排序。
步驟 1 − 檢查兩個陣列的長度是否相同；如果不是，則返回 false。
步驟 2 − 如果長度相同，則使用 forEach() 迴圈遍歷每個元素。
步驟 3 − 對於 array1 的每個元素，使用 indexOf() 方法檢查它是否在 array2 中存在。
步驟 4 − 如果 indexOf() 方法對任何單個元素返回 -1，則表示這兩個陣列不相同。
示例
在下面的示例中，當用戶單擊按鈕時，它將呼叫 compareArray() 函式。compareArray() 函式比較兩個字串元素陣列。
在輸出中，使用者可以觀察到這兩個陣列不相同，因為兩個陣列的值不同。
<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 中比較兩個陣列的不同方法。使用者可以使用第一種方法來比較包含重複值的陣列，第二種方法僅用於比較包含唯一值的陣列。
此外，使用者還可以使用 JSON.stringify() 方法來比較物件陣列和排序陣列。
4K+ 瀏覽量
