zoukankan      html  css  js  c++  java
  • 原生JS forEach()和map()遍历的区别以及兼容写法

    一、原生JS forEach()和map()遍历

    共同点:

        1.都是循环遍历数组中的每一项。

        2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。

        3.匿名函数中的this都是指Window。

        4.只能遍历数组。

    1.forEach()

       没有返回值。

    arr[].forEach(function(value,index,array){

      //do something

    })

    • 参数:value数组中的当前项, index当前项的索引, array原始数组;
    • 数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
    • 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组;
    [javascript] view plain copy
     
    1. var ary = [12,23,24,42,1];  
    2. var res = ary.forEach(function (item,index,input) {  
    3.        input[index] = item*10;  
    4. })  
    5. console.log(res);//--> undefined;  
    6. console.log(ary);//--> 通过数组索引改变了原数组;  


    2.map() 

    有返回值,可以return 出来。

    arr[].map(function(value,index,array){

      //do something

      return XXX

    })

    • 参数:value数组中的当前项,index当前项的索引,array原始数组;
    • 区别:map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
    [javascript] view plain copy
     
    1. var ary = [12,23,24,42,1];  
    2. var res = ary.map(function (item,index,input) {  
    3.     return item*10;  
    4. })  
    5. console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份,并进行了修改
    6. console.log(ary);//-->[12,23,24,42,1];  原数组并未发生变化

    兼容写法:

    不管是forEach还是map在IE6-8下都不兼容(不兼容的情况下在Array.prototype上没有这两个方法),那么需要我们自己封装一个都兼容的方法,代码如下:

    [javascript] view plain copy
     
    1. /** 
    2. * forEach遍历数组 
    3. * @param callback [function] 回调函数; 
    4. * @param context [object] 上下文; 
    5. */  
    6. Array.prototype.myForEach = function myForEach(callback,context){  
    7.     context = context || window;  
    8.     if('forEach' in Array.prototye) {  
    9.         this.forEach(callback,context);  
    10.         return;  
    11.     }  
    12.     //IE6-8下自己编写回调函数执行的逻辑  
    13.     for(var i = 0,len = this.length; i < len;i++) {  
    14.         callback && callback.call(context,this[i],i,this);  
    15.     }  
    16. }  
    [javascript] view plain copy
     
    1. /** 
    2. * map遍历数组 
    3. * @param callback [function] 回调函数; 
    4. * @param context [object] 上下文; 
    5. */  
    6. Array.prototype.myMap = function myMap(callback,context){  
    7.     context = context || window;  
    8.     if('map' in Array.prototye) {  
    9.         return this.map(callback,context);  
    10.     }  
    11.     //IE6-8下自己编写回调函数执行的逻辑  
    12.     var newAry = [];  
    13.     for(var i = 0,len = this.length; i < len;i++) {  
    14.         if(typeof  callback === 'function') {  
    15.             var val = callback.call(context,this[i],i,this);  
    16.             newAry[newAry.length] = val;  
    17.         }  
    18.     }  
    19.     return newAry;  
    20. }  

    二、jQuery $.each()和$.map()遍历

    共同点:

    即可遍历数组,又可遍历对象。

    1.$.each()

    没有返回值。$.each()里面的匿名函数支持2个参数:当前项的索引i,数组中的当前项v。如果遍历的是对象,k 是键,v 是值。

    $.each(arr, function(index,value){

      //do something

    })

    • 参数:arr要遍历的数组,index当前项的索引,value数组中的当前项
    • 第1个和第2个参数正好和以上两个函数是相反的,注意不要记错了
    [javascript] view plain copy
     
    1. $.each( ["a","b","c"], function(i, v){  
    2.      alert( i + ": " + v );  
    3. });  
    [javascript] view plain copy
     
    1. $("span").each(function(i, v){  
    2.      alert( i + ": " + v );  
    3. });  
    
    
    [javascript] view plain copy
     
    1. $.each( { name: "John", lang: "JS" }, function(k, v){  
    2.      alert( "Name: " + k + ", Value: " + v );  
    3. });  

    2.$.map()

    有返回值,可以return 出来。$.map()里面的匿名函数支持2个参数和$.each()里的参数位置相反:数组中的当前项v,当前项的索引 i。如果遍历的是对象,k 是键,v 是值。如果是$("span").map()形式,参数顺序和$.each()  $("span").each()一样。

    $.map(arr, function(value, index){

      //do something

      return XXX

    })

    [javascript] view plain copy
     
    1. var arr=$.map( [0,1,2], function(v){  
    2.      return v + 4;  
    3. });  
    4. console.log(arr);  
    [javascript] view plain copy
     
    1. $.map({"name":"Jim","age":17},function(k, v){  
    2.      console.log( k+":"+v );  
    3. });  
  • 相关阅读:
    反转链表 16
    CodeForces 701A Cards
    hdu 1087 Super Jumping! Jumping! Jumping!(动态规划)
    hdu 1241 Oil Deposits(水一发,自我的DFS)
    CodeForces 703B(容斥定理)
    poj 1067 取石子游戏(威佐夫博奕(Wythoff Game))
    ACM 马拦过河卒(动态规划)
    hdu 1005 Number Sequence
    51nod 1170 1770 数数字(数学技巧)
    hdu 2160 母猪的故事(睡前随机水一发)(斐波那契数列)
  • 原文地址:https://www.cnblogs.com/amujoe/p/9493532.html
Copyright © 2011-2022 走看看