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>
View Code
 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>
View Code
 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>
View Code
 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>
        View Code
         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>

         

转载于:https://www.cnblogs.com/dreamflower/p/5054929.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值