如何使用 jQuery/JavaScript 比较两个 JavaScript 数组对象?
在 JavaScript 中，数组是一个对象，其索引作为键，数组值作为数组对象特定键的值。有时，我们需要检查两个数组是否相同。
首先想到的解决方案是使用相等运算符并比较它们，如 array1 == array2。哎呀!它不起作用，因为数组是一个对象，我们无法在 JavaScript 中直接比较两个对象。所以，我们必须比较数组的每个元素。
在本教程中，我们将学习使用各种方法比较两个 JavaScript 数组对象。
使用 JavaScript 的 sort() 方法并比较每个元素
sort() 方法允许我们在 JavaScript 中对数组值进行排序。之后，我们可以使用 for 循环比较数组中每个索引处的元素。如果任何索引处的元素不匹配，我们可以说两个数组对象是不同的。
语法
用户可以按照以下语法使用 sort() 方法和 for 循环比较两个数组对象。
// 首先对数组进行排序
arra1.sort();
array2.sort();
if (array1.length != array2.length) {
// 数组不一样
} else {
for () {
// 如果索引 i 处的元素不相同，则返回 false
}
}
}
// 两个数组相同
算法
用户可以遵循以下算法。
步骤 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) {
// 数组不相同
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() 方法来比较对象数组和排序数组。
