如何用jQuery/JavaScript来比较两个JavaScript数组对象

如何用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>

输出:

  • 在点击按钮之前。

如何用jQuery/JavaScript来比较两个JavaScript数组对象?

  • 点击该按钮后。

如何用jQuery/JavaScript来比较两个JavaScript数组对象?

步骤 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>

输出:

  • 在点击按钮之前。

如何用jQuery/JavaScript来比较两个JavaScript数组对象?

  • 点击该按钮后。

如何用jQuery/JavaScript来比较两个JavaScript数组对象?

步骤 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>

输出:

  • 在点击按钮之前。

如何用jQuery/JavaScript来比较两个JavaScript数组对象?

  • 点击按钮后。

如何用jQuery/JavaScript来比较两个JavaScript数组对象?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程