jQuery数组($.grep,$.each,$.inArray,$.map)处理函数详解

1.jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )

描述: 查找满足过滤函数的数组元素。原始数组不受影响。

array Type: ArrayLikeObject 用于查询元素的类数组对象.
function Type: Function( Object elementOfArray, Integer indexInArray ) => Boolean

该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素，第二个参数是该元素的索引值。该函数应返回一个布尔值。this将是全局的window对象。
invert Type: Boolean 如果“invert”为false，或没有提供，函数返回一个“callback”中返回true的所有元素组成的数组。如果“invert”为true，函数返回一个“callback”中返回false的所有元素组成的数组。

$.grep()方法会删除数组必要的元素，以使所有剩余元素通过过滤函数的检查。该测试是一个函数传递一个数组元素和该数组内这个的索引值。只有当测试返回true，该数组元素将返回到结果数组中。

该过滤器的函数将被传递两个参数：当前正在被检查的数组中的元素，及该元素的索引值。该过滤器函数必须返回'true'以包含在结果数组项。

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4   <style>

 5   div { color:blue; }

 6   p { color:green; margin:0; }

 7   span { color:red; }

 8   </style>

 9   <script src="http://code.jquery.com/jquery-latest.js"></script>

10 </head>

11 <body>

12   <div></div>

13   <p></p>

14   <span></span>

15

16 <script>

17 var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];

18 $("div").text(arr.join(", "));

19

20 arr = jQuery.grep(arr, function(n, i){

21   return (n != 5 && i > 4);

22 });

23 $("p").text(arr.join(", "));

24

25 arr = jQuery.grep(arr, function (a) { return a != 9; });

26 $("span").text(arr.join(", "));

27

28 </script>

29

30 </body>

31 </html>

 1 <script type='text/javascript' src="/jquery.js"></script>

 2 <script type="text/javascript">

 3 $().ready(

 4 function(){

 5 var array = [1,2,3,4,5,6,7,8,9];

 6 var filterarray = $.grep(array,function(value){

 7 return value > 5;//筛选出大于5的

 8 });

 9 for(var i=0;i<filterarray.length;i++){

10 alert(filterarray[i]);

11 }

12 for (key in filterarray){

13 alert(filterarray[key]);

14 }

15 }

16 );

17 </script>

2.jQuery.each( collection, callback(indexInArray, valueOfElement) )

描述: 一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

jQuery.each(array, callback )
- array 类型: Array 遍历的数组。
- callback 类型: Function( Integer indexInArray, Object value ) 该函数会在每个对象上（迭代）调用。
jQuery.each( object, callback )

object 类型: Object 遍历的对象。
callback 类型: Function( String propertyName, Object valueOfProperty ) 该函数会在每个对象上（迭代）调用。

$.each()函数和$(selector).each()是不一样的，那个是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。（该值也可以通过访问this关键字得到，但是JavaScript将始终将this值作为一个Object ，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是迭代的对象。

注意: $.each()函数会在内部检索并且使用传递集合的 length属性。所以，如果集合有一个名为length的属性 - 比如 {bar: 'foo', length: 10} - 这个函数可能无法正常工作。

 1 <!doctype html>

 2 <html lang="en">

 3 <head>

 4   <meta charset="utf-8">

 5   <title>jQuery.each demo</title>

 6   <style>

 7   div {

 8     color: blue;

 9   }

10   div#five {

11     color: red;

12   }

13   </style>

14   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

15 </head>

16 <body>

17

18 <div id="one"></div>

19 <div id="two"></div>

20 <div id="three"></div>

21 <div id="four"></div>

22 <div id="five"></div>

23

24 <script>

25 var arr = [ "one", "two", "three", "four", "five" ];

26 var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };

27

28 jQuery.each( arr, function( i, val ) {

29   $( "#" + val ).text( "Mine is " + val + "." );

30

31   // Will stop running after "three"

32   return ( val !== "three" );

33 });

34

35 jQuery.each( obj, function( i, val ) {

36   $( "#" + i ).append( document.createTextNode( " - " + val ) );

37 });

38 </script>

39

40 </body>

41 </html>

 1 <script type='text/javascript' src="/jquery.js"></script>

 2 <script type="text/javascript">

 3 $().ready(

 4 function(){

 5 var anObject = {one:1,two:2,three:3};//对json数组each

 6 $.each(anObject,function(name,value) {

 7 alert(name);

 8 alert(value);

 9 });

10 var anArray = ['one','two','three'];

11 $.each(anArray,function(n,value){

12 alert(n);

13 alert(value);

14 }

15 );

16 }

17 );

18 </script>

3.jQuery.inArray( value, array [, fromIndex ] )

描述: 在数组中查找指定值并返回它的索引（如果没有找到，则返回-1）。

value 类型: Anything 要查找的值。
array 类型: Array 一个数组，通过它来查找。
fromIndex 类型: Number 数组索引值，表示从哪里在开始查找。默认值是0，这将查找整个数组。

$.inArray()方法类似于JavaScript的原生.indexOf()方法，没有找到匹配元素时它返回-1。如果数组第一个元素匹配value（参数），那么$.inArray()返回0。

因为JavaScript将0视为false(即 0 == false, 但是 0 !== false)，要检查在array中是否存在value，你需要检查它是否不等于（或大于）-1。

值之间的比较是严格比较（愚人码头注：即，===或!==比较）。下面这段代码返回 -1 (没有找到) ，因为字符串数组中不可能找到一个数字：

$.inArray( 5 + 5, [ "8", "9", "10", 10 + "" ] );

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4   <style>

 5   div { color:blue; }

 6   span { color:red; }

 7 </style>

 8   <script src="http://code.jquery.com/jquery-latest.js"></script>

 9 </head>

10 <body>

11

12 <div>"John" found at <span></span></div>

13 <div>4 found at <span></span></div>

14 <div>"Karl" not found, so <span></span></div>

15 <div>"Pete" is in the array, but not at or after index 2, so <span></span></div>

16 <script>var arr = [ 4, "Pete", 8, "John" ];

17 var $spans = $("span");

18 $spans.eq(0).text(jQuery.inArray("John", arr));

19 $spans.eq(1).text(jQuery.inArray(4, arr));

20 $spans.eq(2).text(jQuery.inArray("Karl", arr));

21 $spans.eq(3).text(jQuery.inArray("Pete", arr, 2));

22 </script>

23

24 </body>

25 </html>

 1 <script type='text/javascript' src="/jquery.js"></script>

 2 <script type="text/javascript">

 3 $().ready(

 4 function(){

 5 var anArray = ['one','two','three'];

 6 var index = $.inArray('two',anArray);

 7 alert(index);//返回该值在数组中的键值，返回1

 8 alert(anArray[index]);//value is two

 9 }

10 );

11 </script>

4.jQuery.map( array, callback(elementOfArray, indexInArray) )

jQuery.map( array, callback(elementOfArray, indexInArray) )
- array
  
  类型: Array
  
  待转换数组。
- callback(elementOfArray, indexInArray)
  
  类型: Function()
  
  处理每一个元素的函数。第一个参数是数组元素，第二个参数是该元素的索引值。该函数可以返回任何值。在函数内部，this将是全局的window对象。
jQuery.map( arrayOrObject, callback( value, indexOrKey ) )
- arrayOrObject 类型: Array,Object 待转换数组或对象。
- callback( value, indexOrKey ) 类型: Function() 处理每一个元素的函数。第一个参数是数组中元素或对象的值，第二个参数是该元素在数组中的索引值或该对象的键。该函数可以返回任何值，该返回值会被添加到数组中。若返回是数组，则会将该数组中的元素添加到最终的结果数组中。在函数内部， this指的是全球（window）的对象。
- 如果你希望处理一个jQuery对象——例如，$('div').map( callback ); — 使用 .map() 代替.
  
  $.map()方法会在数组的每一个元素或对象上应用一个函数并将结果映射到一个新的数组中。在jQuery 1.6之前，，$.map()只支持遍历数组和类似数组的对象 。在jQuery 1.6也支持遍历对象。
  
  类数组（Array-like）对象——也就是那些含有.length属性以及在索引值为.length - 1 的位置有值的对象，必须将其转化成真正的数组之后才能传递给 $.map()方法使用。jQuery 库提供了 $.makeArray() 方法来完成这样的转换。
- ```
 1 // The following object masquerades as an array.

 2 var fakeArray = {"length": 1, 0: "Addy", 1: "Subtracty"};

 3

 4 // Therefore, convert it to a real array

 5 var realArray = $.makeArray( fakeArray )

 6

 7 // Now it can be used reliably with $.map()

 8 $.map( realArray, function(val, i) {

 9   // do something

10 });
```
  在该方法中提供的转换函数会应用在数组或对象的顶级（top-level）元素上，并且该转换函数中有两个参数：元素在数组或对象中的值及该值所对应的索引值或键。
  
  该函数可以返回：
  - 转换后的值，该值会被映射到最终的结果数组中
  - null或者undefined, 用于移除该元素
  - 数组，会将该数组中的元素添加到最终的结果数组中
  - 1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <style>
    5 div { color:blue; }
    6 p { color:green; margin:0; }
    7 span { color:red; }
    8 </style>
    9 <script src="http://code.jquery.com/jquery-latest.js"></script>
    10 </head>
    11 <body>
    12 <div></div>
    13 <p></p>
    14 <span></span>
    15
    16 <script>
    17 var arr = [ "a", "b", "c", "d", "e" ];
    18 $("div").text(arr.join(", "));
    19
    20 arr = jQuery.map(arr, function(n, i){
    21 return (n.toUpperCase() + i);
    22 });
    23 $("p").text(arr.join(", "));
    24
    25 arr = jQuery.map(arr, function (a) {
    26 return a + a;
    27 });
    28 $("span").text(arr.join(", "));
    29
    30 </script>
    31
    32 </body>
    33 </html>
```
 1 <script type='text/javascript' src="/jquery.js"></script>

 2 <script type="text/javascript">

 3 $().ready(

 4 function(){

 5 var strings = ['0','1','2','3','4','S','6'];

 6 var values = $.map(strings,function(value){

 7 var result = new Number(value);

 8 return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写

 9 }

10 );

11 for (key in values) {

12 alert(values[key]);

13 }

14 }

15 );

16 </script>
```