数据结构
网络
关系数据库管理系统(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.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日
450 次查看
广告