1. 程式人生 > >es5 foreach 和 map

es5 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];  原陣列並未發生變化