資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
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**。
- 該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()Lodash庫的方法來比較這兩個陣列。
- 我們在head部分使用了script標籤，從內容分發網路(CDN)包含Lodash庫，以新增Lodash的實用程式函式，這允許我們使用lodash方法，例如**_.isEqual()**。
- 我們初始化了兩個我們將要比較的陣列，分別為**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日
450 次檢視
廣告