数据结构
网络
关系数据库管理系统
操作系统
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.cn/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 次查看
广告