jQuery学习笔记——操作数组集合

1、对数组和集合进行迭代

$.each(container, [callback])　　

概述：通用遍历方法，可以遍历数组和对象。

不同于遍历jQuery对象的$('*').each() 方法，此方法可用于遍历任何对象。回调函数拥有两个参数：第一个对象的成员或数组索引，第二个为对应的变量内容。如果需要退出each循环可以使用回调函数返回false，其他返回值将被忽略。

参数：container 需要遍历的对象或者数组。

　　　callback（可选）每个成员、元素执行的回调函数。

示例：

//遍历数组
var originalArray = [100, 200, 300, 400, 500];
            $.each(originalArray, function (i,value) {
                //console.log(this.toString());
                console.log("item"+i+":"+value);
            });


//遍历对象
var objList = { name: "Jack", language: "JS",city:"New York" };
            $.each(objList, function (i, n) {
                console.log("Key:" + i + ",Value:" + n);
            });        

执行结果分别是：

item0:100
item1:200
item2:300
item3:400
item4:400
Key:name,Value:Jack
Key:language,Value:JS
Key:city,Value:New York

2、对数组进行筛选

$.grep(array,callback,[invert])

概述：使用过滤函数过滤数组元素

此函数至少传递两个参数：待过滤数组array和过滤函数callback。

示例：过滤数组中大于0的元素。

 

var array = [100, 200, 300, 400, 500]  ;
            $($.grep(array, function (n, i) {
                return n > 100;
            })).each(function (i, n)
            {
                console.log(n);
            });

执行结果：

200
300
400
500

注：$.grep和$.each的回调函数略有不同，grep是当前值n在前，索引i在后；each是索引值i在前，当前值n在后。

3、对数组进行转换

$.map(array, callback)

通过我们可以通过$.each遍历数组元素实现对数组的转换操作。但是jQuery有更好用的方式：$.map。

概述：遍历数组，为树立的个元素分别执行回调函数，并把回调函数的返回值收集到新数组。

此函数至少传递两个参数：待过滤数组array和过滤函数callback。

示例：

var strings = ['1', '2', 'S', '4','5'];
            var values = $.map(strings, function (value) {
                var result = new Number(value);
                return isNaN(result) ? null : result;
            });
            $(values).each(function (i,n) {
                console.log(n.toString());
            });

执行结果：

1
2
4
5

4、其他

$.inArray(value, array)

概述：返回参数value在数组中的位置下标，从0开始计数（如果没有则返回-1）。

示例：

var arr = [1001, 'John', 1002, 'Tom'];
            var temp = $.inArray(1002, arr).toString();
            console.log(temp);

执行结果：2

$.makeArray(obj)

概述：将类数组对象转换为数组对象。

示例：

<div>
        <ul id="item">
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
            <li>dd</li>
            <li>ee</li>
        </ul>
</div>

var lis = document.getElementById('item').getElementsByTagName('li');
            //var lis = document.getElementsByTagName('li');
            console.log(lis.length);
            
            $.makeArray(lis);
            console.log(lis[2].innerHTML);

执行结果：cc