array 遍歷

ForEach、Filter、Map、Reduce

for

依序遍歷 array 指定範圍的索引，對原始 array 執行給定的函式。

const items = ['item1', 'item2', 'item3']; 
const copy = [];  
// 設定要對 "items" 處理的索引範圍
for (let i=0; i<items.length; i++) {  
    copy.push(items[i])  
    // "copy" 陣列中塞入 (複製)「此 "items" 元素」
}

forEach

依序遍歷 array 每個元素，對原始 array 執行給定的函式。

const items = ['item1', 'item2', 'item3']; 
const copy = [];  

// 依序處理 "items" 陣列元素
items.forEach( function(item){  
    copy.push(item)   
    // "copy" 陣列中塞入 (複製)「此 "items" 元素」
});

filter()

依序遍歷 array 的每個索引，對元素執行給定的函式， 最後會用一個新陣列來安置「執行給定函式後，回傳 true 的元素」。

const items = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];  

const copy = words.filter( word => word.length > 6 );  
/** or
* 建立一個給定函式：
* const testFunc = function(word){
*   return word.length > 6   
*   // 「長度大於 6」== true 的元素可丟出
* }
* const copy = items.filter( testFunc );
* // filter 會用一個新陣列，去接收通過 testFunc 檢定的元素
**/

console.log(copy);  
// expected output: Array ["exuberant", "destruction", "present"]

map()

依序遍歷 array 的每個索引，對元素執行給定的函式， 最後會用一個新陣列來安置「每個執行給定函式後的結果」。

var items = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];  
var copy = items.map(item =>{ 
    return item;  // 回傳給 map()，而產生同長度的陣列
    // return item.length > 6; // 此句回傳的是 true / fasle

})
console.log(copy);

reduce()

reduce，漸少。

reduce( <給定函式>, <第一個傳入給定函式的值,若省略則為 array 第一個元素> )

會將 array 元素，依序傳給一個 "給定函式" 做計算。 "給定函式" 計算後的回傳結果，和 array 下個元素...又會再傳入那個 "給定函示" 做迭代運算，...最後會算出一個值。

const array1 = [10, 20, 30, 40];
const reducer = function( a, b, c, d, e ){
    console.log("a:"+a+" b:"+b+" c:"+c+" d:"+d+" e:"+e+" #")
    return a + b
};
// 1st: "a:10 b:20 c:1 d:10,20,30,40,50 e:undefined #"
// 2nd: "a:30 b:30 c:2 d:10,20,30,40,50 e:undefined #"
// ...
// reduce() 可傳入 "給定函式" 的參數：
// a: function 計算回傳的 (迭代) 值
// b: array 當前元素
// c: 執行次數
// d: 整個 array 內容
// e: undefined

const array1 = [10, 20, 30, 40];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 10 + 20 + 30 + 40
console.log(array1.reduce(reducer));
// expected output: 150

// 5 + 10 + 20 + 30 + 40
console.log(array1.reduce(reducer, 5));
// expected output: 155