array 遍歷

ForEach、Filter、Map、Reduce

for

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

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

forEach

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

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

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

filter()

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

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

const copy = words.filter( word => word.length > 6 );  
/** or
* 建立一個用來檢定的 function：
* 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; 
    // ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];                      
    // return item.length > 6; // true / fasle

})
console.log(copy);

reduce()

reduce：漸少。 array.reduce( callback, intVaule )： 將 array 元素依序傳入 reduce() 做迭代計算； 第一個元素傳入後，用 callback 處理、 再加上第二個元素，再用 callback 處理...不停迭代，最後會得到一 "最終值"。

const array1 = [1, 2, 3, 4];

// 一個處理元素的 callback
const reducer = (accumulator, currentValue) => accumulator + currentValue;
/** or 
 * const reducer = function(a, c){
 * return a + c
 * };
 **/ 

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15