用佚代的方式瀏覽陣列

前言

  在較新的 ECMAScript 標準中支援了用佚代的方式來瀏覽陣列，但由於舊的 For 迴圈語法相當強大，所以一直覺得沒必要更換，但由於新標準推行已經很久了，現在看別人的程式碼會看到佚代，就算自己不用也要看得懂別人的程式碼，所以就來研究學習，在此做個紀錄。

內容

  目前常看到的有 forEach() 、 map() 與 filter() ，這次會示範使用的範例與用 for 迴圈地等效範例。

  首先看到 forEach() 的用法，範例如下

let ar = [ 1 , 2 , 3 ];
ar.forEach( function( ele ){
  console.log( ele );
} );
//
//1
//2
//3

for 迴圈的等效程式碼如下

let ar = [ 1 , 2 , 3 ];
for(let i = 0 ; i < ar.length ; i++)
  console.log( ar[i] );
//
//1
//2
//3

相比 for 迴圈的作法， forEach() 比較簡潔，但沒辦法改變瀏覽對象，一定是全部的對象。接著看到 map() ，範例如下

let ar = [ 1 , 2 , 3 ];

let res = ar.map( function(ele){
  return ele ;
} );
console.log( res );
//
//[1, 2, 3]

for 迴圈的等效程式碼如下

let ar = [ 1 , 2 , 3 ];

let res = [];
for( let i = 0 ; i < ar.length ; i++ )
  res.push( ar[i] );
//
console.log( res );
//
//[1, 2, 3]

map() 相比之下少了變數宣告的過程，直接取得回傳值就可以了，但瀏覽的對象一定是全部，而且也沒辦法不回傳要推入的對象，也就是說 map() 的會傳的陣列數量會和原來的陣列一樣。最後看到 filter() ，範例如下

let ar = [ 1 , 2 , 3 ];

let res = ar.filter( function(ele){
  return ele > 1;
} );
console.log( res );
//
//[2, 3]

for 迴圈的等效程式碼如下

let ar = [ 1 , 2 , 3 ];

let res = [];
for( let i = 0 ; i < ar.length ; i++){
  if( ar[i] > 1)
    res.push( ar[i] );
}
  
console.log( res );
//
//[2, 3]

filter() 可以對新產生的陣列做出篩選，但內容無法運算，而 map() 可以對要輸出的對象做運算，但無法篩選要輸出的對象。

參考資料

[ developer.mozilla.org ] forEach

[ developer.mozilla.org ] map

[ developer.mozilla.org ] filter