原生JS forEach()和map()遍歷的區別以及兼容寫法


轉:https://www.cnblogs.com/liuruyi/p/6483526.html

一、原生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. }  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM