資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中比較兩個陣列？
為了在 Javascript 中比較兩個陣列，我們可以使用各種方法。我們將在本文中瞭解各種方法。在比較兩個陣列時，我們不能使用“==”或“===”運算子，因為它們比較兩個陣列指向的記憶體塊的地址，從而導致結果為假。
在本文中，我們有兩個陣列，我們的任務是在 JavaScript 中比較兩個 陣列。
在 JavaScript 中比較陣列的方法
以下是我們在本文中將討論的，用於在 JavaScript 中比較兩個陣列的方法，包括分步說明和完整的示例程式碼。
- 使用 for 迴圈
- 使用 JSON.stringify() 方法
- 使用 every() 方法
- 使用 set() 方法
- 使用 join() 方法
- 使用 Array.prototype.sort() 方法
- 使用 Lodash _.isEqual() 方法
使用 for 迴圈
為了在 JavaScript 中比較兩個陣列，我們使用了 JavaScript for 迴圈。使用 for 迴圈，我們迭代第一個陣列的每個元素，並將其與第二個陣列的每個元素進行比較。
- 我們初始化了四個陣列，然後使用 **compare_arrays()** 來比較這兩個陣列。首先，我們使用 length 屬性檢查陣列的長度。如果兩個陣列的長度不相等，則返回 false。
- 為了比較這兩個陣列，我們使用了 **for 迴圈**。它迭代第一個陣列的每個元素，並使用 if/else 語句將其與第二個陣列的每個元素進行比較。
- 如果兩個陣列中的元素不相同，則返回 false，否則返回 true。我們使用了兩個 div 元素來顯示結果，其 id 分別為 **res1** 和 **res2**。
- The getElementById() 方法獲取這兩個 div 元素，並且 innerHTML 顯示結果。
示例
這是一個完整的示例程式碼，實現了上述步驟，用於使用 **for 迴圈** 在 JavaScript 中比較兩個陣列。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Comparing arrays in JavaScript
</title>
</head>
<body>
<h2>
Comparing arrays in JavaScript
</h2>
<p>
In this example we have used <strong>for loop
</strong> to compare given arrays in JavaScript.
</p>
<div id="res1"></div>
<div id="res2"></div>
<script>
function compare_arrays(a1, a2) {
if (a1.length != a2.length) {
return false;
}
else {
for (let i = 0; i < a1.length; i++) {
if (a1[i] != a2[i]) {
return false;
}
}
return true;
}
}
const x = [2, 4, 7, 9];
const y = [2, 4, 7, 9];
const w = [2, 3, 5, 7];
const z = [2, 4, 3, 1];
let div1 = document.getElementById("res1");
let div2 = document.getElementById("res2");
const ans1 = compare_arrays(x, y);
const ans2 = compare_arrays(w, z);
if (ans1) {
div1.innerHTML = "Elements of array x [" + x
+ "] and y [" +y +"] are same."
}
else {
div1.innerHTML = "Elements of array x [" + x
+ "] and y [" +y +"] are different."
}
if (ans2) {
div2.innerHTML = "Elements of array w ["
+ w + "] and z [" +z +"] are same."
}
else {
div2.innerHTML = "Elements of array w [" + w
+ "] and z [" +z +"] are different."
}
</script>
</body>
</html>
使用 JSON.stringify() 方法
在這種方法中，為了在 JavaScript 中比較兩個陣列，我們使用了 JSON.stringify() 方法，該方法將陣列轉換為字串。
- 我們初始化了兩個陣列，我們將對其進行比較，即 **arr1** 和 **arr2**。
- 然後，我們使用 **JSON.stringify()** 方法將陣列轉換為字串。轉換為字串後，我們使用簡單的 if/else 條件來比較 arr1 和 arr2。
- 我們使用了 id 為 **div1** 的 div 元素、getElementById() 方法和 innerHTML 屬性在螢幕上顯示輸出。
示例
這是一個完整的示例程式碼，實現了上述步驟，用於使用 **JSON.stringify()** 方法在 JavaScript 中比較兩個陣列。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Comparing arrays in JavaScript
</title>
</head>
<body>
<h2>
Comparing arrays in JavaScript
</h2>
<p>
In this example we have used <strong>JSON.stringify()
</strong> method to compare given arrays in JavaScript.
</p>
<div id = "div1"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
let x= document.getElementById("div1");
if( JSON.stringify(arr1) == JSON.stringify(arr2) ){
x.innerHTML="Elements of array arr1 [" + arr1
+ "] and arr2 [" +arr2 +"] are same."
}
else{
x.innerHTML="Elements of array arr1 [" + arr1
+ "] and arr2 [" +arr2 +"] are different."
}
</script>
</body>
</html>
使用 every() 方法
在這種方法中，我們使用了 every() 方法在 JavaScript 中比較兩個陣列。JavaScript every() 方法檢查陣列中所有元素是否滿足特定條件。
- 我們初始化了兩個陣列，我們將對其進行比較，即 **arr1** 和 **arr2**。
- 我們使用了 **length** 屬性來檢查兩個陣列的長度是否相等。然後，**every()** 方法檢查 arr1 的所有元素是否與 arr2 的對應元素匹配。
- **every()** 方法返回 true 或 false，該值儲存在變數 **areEqual** 中。然後，**areEqual** 變數與 if/else 條件一起使用，以在陣列相同或不同時顯示結果。
- 我們使用了 id 為 **res** 的 div 元素、getElementById() 方法和 innerHTML 屬性在螢幕上顯示輸出。
示例
這是一個完整的示例程式碼，實現了上述步驟，用於使用 **every()** 方法在 JavaScript 中比較兩個陣列。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Comparing arrays in JavaScript
</title>
</head>
<body>
<h2>
Comparing arrays in JavaScript
</h2>
<p>
In this example we have used <strong>every()
</strong> method to compare given arrays in
JavaScript.
</p>
<div id="res"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const areEqual = arr1.length === arr2.length &&
arr1.every((val, index) =>
val === arr2[index]);
if (areEqual) {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are same."
}
else {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are different."
}
</script>
</body>
</html>
使用 set() 方法
在這種方法中，為了在 JavaScript 中比較兩個陣列，我們使用了 set() 方法，該方法僅儲存唯一值。
- 我們初始化了兩個陣列，我們將對其進行比較，即 **arr1** 和 **arr2**。
- 我們使用了 length 屬性來檢查兩個陣列的長度是否相等。
- 我們使用了 擴充套件運算子 **[...arr1, ...arr2]** 將這兩個數組合併到新陣列中。然後，我們將這個新陣列作為 **new Set([...arr1, ...arr2])** 傳遞給 set 方法，該方法僅保留新陣列中的唯一值。
- 然後，我們將這些唯一值的元素數量與陣列 arr1 進行了比較。如果兩個陣列的長度相同，則 **arr1** 和 **arr2** 相同。
- 我們使用了 **areEqual** 和 if/else 語句，使用 div 元素、getElementById() 方法和 innerHTML 屬性顯示輸出。
示例
這是一個完整的示例程式碼，實現了上述步驟，用於使用 **set()** 方法在 JavaScript 中比較兩個陣列。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Comparing arrays in JavaScript
</title>
</head>
<body>
<h2>
Comparing arrays in JavaScript
</h2>
<p>
In this example we have used <strong>set()
</strong> method to compare given arrays in
JavaScript.
</p>
<div id="res"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const areEqual = arr1.length === arr2.length &&
new Set([...arr1, ...arr2]).size === arr1.length;
if (areEqual) {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are same."
}
else {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are different."
}
</script>
</body>
</html>
使用 join() 方法
在這種方法中，我們使用了 join() 方法在 JavaScript 中比較兩個陣列。
- 我們初始化了兩個陣列，我們將對其進行比較，即 **arr1** 和 **arr2**。
- 然後，我們使用 **join()** 方法將給定的陣列轉換為逗號分隔的字串。轉換為字串後，我們使用嚴格相等運算子 (===) 來比較 arr1 和 arr2。
- 我們使用了 **areEqual** 和 if/else 語句，使用 div 元素、getElementById() 方法和 innerHTML 屬性顯示輸出。
示例
這是一個完整的示例程式碼，實現了上述步驟，用於使用 **join()** 方法在 JavaScript 中比較兩個陣列。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Comparing arrays in JavaScript
</title>
</head>
<body>
<h2>
Comparing arrays in JavaScript
</h2>
<p>
In this example we have used <strong>join()
</strong> method to compare given arrays in JavaScript.
</p>
<div id="res"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const areEqual = arr1.join(',') === arr2.join(',');
if (areEqual) {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are same."
}
else {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are different."
}
</script>
</body>
</html>
使用 Array.prototype.sort() 方法
在這種方法中，為了在 JavaScript 中比較兩個陣列，我們使用了 sort() 方法，該方法按升序對陣列進行排序。
- 我們初始化了兩個陣列，我們將對其進行比較，即 **arr1** 和 **arr2**。
- 然後，我們使用 **sort()** 方法按升序對這兩個陣列進行排序。然後，我們使用 toString() 方法將這個排序後的陣列轉換為字串。
- 轉換為字串後，我們使用嚴格相等運算子 (===) 來比較 arr1 和 arr2。
- 我們使用了 **areEqual** 和 if/else 語句，使用 div 元素、getElementById() 方法和 innerHTML 屬性顯示輸出。
示例
這是一個完整的示例程式碼，實現了上述步驟，用於使用 **Array.prototype.sort()()** 方法在 JavaScript 中比較兩個陣列。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Comparing arrays in JavaScript
</title>
</head>
<body>
<h2>
Comparing arrays in JavaScript
</h2>
<p>
In this example we have used <strong>sort()
</strong> method to compare given arrays in
JavaScript.
</p>
<div id="res"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const areEqual = arr1.sort().toString() ===
arr2.sort().toString();
if (areEqual) {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are same."
}
else {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are different."
}
</script>
</body>
</html>
使用 Lodash _.isEqual() 方法
在這種方法中，我們使用了 Lodash 庫在 JavaScript 中比較兩個陣列。我們使用了 _.isEqual() 方法來比較這兩個陣列。
- 我們在 head 部分使用了 script 標籤，從內容交付網路 (CDN) 中包含 Lodash 庫，以新增 Lodash 的實用程式函式，這使我們能夠使用諸如 **_.isEqual()** 之類的 lodash 方法。
- 我們初始化了兩個陣列，我們將對其進行比較，即 **arr1** 和 **arr2**。
- 然後，我們對 arr1 和 arr2 使用 **_.isEqual()** 方法來比較這兩個陣列是否相等。它返回 true 或 false，該值儲存在 **areEqual** 變數中。
- 我們使用了 **areEqual** 和 if/else 語句，使用 div 元素、getElementById() 方法和 innerHTML 屬性顯示輸出。
示例
這是一個完整的示例程式碼，實現了上述步驟，用於使用 **Lodash _.isEqual()** 方法在 JavaScript 中比較兩個陣列。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Comparing arrays in JavaScript
</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
<h2>
Comparing arrays in JavaScript
</h2>
<p>
In this example we have used Lodash <strong>_.isEqual()
</strong> method to compare given arrays in
JavaScript.
</p>
<div id="res"></div>
<script>
const arr1 = [2, 4, 7, 9];
const arr2 = [2, 4, 7, 9];
const areEqual = _.isEqual(arr1, arr2);
if (areEqual) {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are same."
}
else {
document.getElementById("res").innerHTML =
"Elements of array arr1 [" + arr1
+ "] and arr2 [" + arr2 + "] are different."
}
</script>
</body>
</html>
結論
在本文中，我們瞭解了在 JavaScript 中比較兩個陣列的各種方法。其中一些方法包括：使用 **for 迴圈**、**JSON.stringify()** 方法、使用 **set()** 方法等等。這些方法可以根據使用者在不同用例中的需求來使用。
更新於： 2024-11-19
455 次檢視
廣告