如何用jQuery/JavaScript来比较两个JavaScript数组对象
给出两个JavaScript数组/数组对象,任务是比较两个数组对象的相等性。
步骤 1:
- 使用jQuery not()方法检查数组1的每个元素,如果它不存在于数组2中,或者数组2的每个元素,如果它不存在于数组1中,那么在这两种情况下都返回错误。
- 还要检查两个数组的长度。
例子:这个例子使用jQuery not()方法来比较两个数组的相等。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to compare two JavaScript
array objects using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 24px; font-weight: bold; color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var arr1 = [1, 3, 5, 8];
var arr2 = [1, 3, 5, 7];
up.innerHTML = "Click on the button to check "
+ "equality of arrays.<br>Array1 - "
+ arr1 + "<br>Array2 - " + arr2;
function GFG_Fun() {
down.innerHTML =
(arr1).not(arr2).length === 0 &&
(arr2).not(arr1).length === 0;
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
步骤 2:
- 首先,使用sort()函数将两个数组按升序排序。
- 然后开始一个一个地匹配元素,如果发现有任何不匹配,则返回false,否则返回true。
例子:这个例子使用上面讨论的方法。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to compare two JavaScript
array objects using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 24px; font-weight: bold; color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var arr1 = [1, 3, 7, 5];
var arr2 = [1, 3, 5, 7];
up.innerHTML = "Click on the button to check "
+ "equality of arrays.<br>Array1 - "
+ arr1 + "<br>Array2 - " + arr2;
function compare(ar1, ar2) {
ar1.sort();
ar2.sort();
if(ar1.length != ar2.length)
return false;
for(var i = 0; i < ar1.length; i++) {
if (ar1[i] != ar2[i])
return false;
}
return true;
}
function GFG_Fun() {
down.innerHTML = compare(arr1, arr2);
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
步骤 3:
- 创建两个数组对象并将其存储到arr1和arr2变量中。
- 使用JSON.stringify()函数,将对象转换成JSON字符串。
- 现在使用比较运算符(==)比较两个JSON字符串,检查两个数组对象是否相等。
注意:该方法只在两个数组对象排序相同的情况下有效。
示例:
<!DOCTYPE HTML>
<html>
<head>
<title>
How to compare two JavaScript
array objects using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>
Click on the button to check
equality of arrays
</h2>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 24px; font-weight: bold; color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var arr1 = [
{id: "1", name: "GeeksforGeeks"},
{id: "2", name: "GFG"}
];
var arr2 = [
{id: "1", name: "GeeksforGeeks"},
{id: "2", name: "GFG"}
];
up.innerHTML = "<h3>Array1:</h3> "
+ JSON.stringify(arr1)
+ "<h3>Array2:</h3> "
+ JSON.stringify(arr2);
function compare(ar1, ar2) {
if(JSON.stringify(arr1) == JSON.stringify(arr2)){
return true;
}
else
return false;
}
function GFG_Fun() {
down.innerHTML = compare(arr1, arr2);
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击按钮后。