为了更加方便地操作数组，jQuery为我们提供了5种方法，如下表所示。

jQuery操作数组的方法
方法 说明
$.inArray() 判断元素
$.merge() 合并数组
$.makeArray() 转换数组
$.grep() 过滤数组
$.each() 遍历数组

一、判断元素：$.inArray()

在jQuery中，我们可以使用$.inArray()方法来判断某个值是否存在于数组中。

语法：

$.inArray(value, array)

说明：

参数value是一个值，参数array是一个数组。$.inArray(value, array)表示判断value是否存在于array。如果存在，则返回value的位置（即下标）；如果不存在，则返回-1。

$.inArray()方法跟JavaScript中的indexOf()方法很相似，indexOf()返回的是字符串首次出现的位置，而$.inArray()返回的是元素在数组中的位置。如果找到，返回的是一个大于或等于0的值（下标）；如果未找到，则返回-1。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var arr = [1, 2, 3, 4, 5];
            var index = $.inArray(3, arr);
            if(index == -1){
                console.log("没有找到元素");
            }else{
                console.log("元素下标为：" + index);
            }
        })
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下图所示。

二、合并数组：$.merge()

在jQuery中，我们可以使用$.merge()方法来合并两个数组。

语法：

$.merge(arr1, arr2)

说明：

$.merge()方法会合并arr1和arr2，然后返回新的数组。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var frontEnd = ["HTML", "CSS", "JavaScript"];
            var backEnd = ["PHP", "JSP", "ASP.NET"];
            var result = $.merge(frontEnd, backEnd);
            console.log(result);
        })
    </script>
</head>
<body>
</body>
</html>

控制台输出结果如下图所示。

三、转换数组：$.makeArray()

在jQuery中，我们可以使用$.makeArray()方法将“类数组对象”转换为真正的数组。那什么叫类数组对象呢？类数组对象必须有length属性，例如arguments、nodeList等。

语法：

$.makeArray(obj)

说明：

$.makeArray()方法返回值是一个数组。如果参数obj不是类数组对象，则返回值是一个空数组。

举例：将arguments转化为Array

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        function test() {
            var arr = $.makeArray(arguments);
            console.log(arr);
        }
        test("yes",1,{});      // ["yes", 1, Object]
    </script>
</head>
<body>
</body>
</html>

控制台输出结果如下图所示。

分析：

可能很多人就会问了，为什么要将arguments、nodeList这些类数组对象转换为真正的数组呢？因为转换为数组后，我们就可以调用数组的各种方法来操作这些对象！

举例：将nodeList转换为Array

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var arr = $.makeArray($("li"));
            $("ul").html(arr.reverse());
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

分析：

将nodeList转换为Array这种方式非常好用，特别是对一组节点进行同一操作的时候。像上面这个例子，小伙伴们想一下如果使用原生JavaScript语法该怎么实现（提示：ES6提供了Array.from()方法）。

四、过滤数组：$.grep()

在jQuery中，我们可以使用$.grep()方法来过滤数组中不符合条件的元素。

语法：

$.grep(array, function(value,index){
    ……
}, false)

说明：

第1个参数array是一个数组。

第2个参数是一个匿名函数。该匿名函数有两个形参：value表示当前元素的“值”；index表示当前元素的“索引”。

第3个参数是一个布尔值。如果为false，则.grep()只会收集函数返回true的数组元素；如果为true，则.grep()只会收集函数返回false的数组元素。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var arr = [3, 9, 1, 12, 50, 21];
            var result = $.grep(arr, function(value,index){
                return value > 10;
            },false);
            console.log(result);
        })
    </script>
</head>
<body>
</body>
</html>

默认情况下，控制台输出结果如下图所示。

当我们把第3个参数改为true时，此时控制台输出结果如下图所示：

分析：

在实际开发中，$.grep()方法常用于获取两个数组中相同的部分或不相同的部分，请看下面例子。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var a = [3, 9, 1, 12, 50, 21];
            var b = [2, 9, 1, 16, 50, 32];
            var result = $.grep(a, function(value,index){
                if(b.indexOf(value) >=0){
                    return true;
                }
            },false);
            console.log(result);
        })
    </script>
</head>
<body>
</body>
</html>

控制台输出结果如下图所示；

分析：

上面这个例子表示获取数组a中跟数组b相同的部分。如果想要获取数组a中跟数组b不同的部分，只要把$.grep()方法的第3个参数改为true就可以了。

五、遍历数组：$.each()

在jQuery中，我们可以使用$.each()方法来遍历数组。

语法：

$.each(array, function(index, value){
    ……
})

说明：

第1个参数array是一个数组。

第2个参数是一个匿名函数。该匿名函数有两个形参，index表示当前元素的“索引”，value表示当前元素的“值”。

如果需要退出each循环，可以在回调函数中返回false，即return false。

一定要注意，这里是function(index, value)，而不是function(value,index)。.grep()和.each()这两个方法中的匿名函数参数顺序是不一样的！

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var arr = ["HTML","CSS","JavaScript"];
            $.each(arr, function(index,value){
                var result = "下标：" + index + "，值：" + value;
                console.log(result);
            })
        })
    </script>
</head>
<body>
</body>
</html>

控制台输出结果如下图所示。

分析：

对于$.each()方法来说，我们可以使用两种方式来获取当前元素的值：arr[index]、value。

$.each(arr, function(index,value){
    var result = "下标：" + index + "，值：" + value;
    console.log(result);
})

上面代码其实可以等价于：

$.each(arr, function(index,value){
    var result = "下标：" + index + "，值：" + arr[index];
    console.log(result);
})

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var arr = ["HTML","CSS","JavaScript"];
            $.each(arr, function(index,value){
                var result = value.split("").reverse().join("");
                arr[index] = result;
            })
            console.log(arr);
        })
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下图所示。

此外，$.each()除了可以遍历数组之外，还可以用于遍历对象，我们在下一节会详细介绍。