圖片來源：tooto1985/js-array-operations

內心劇場之胡言亂語

萬能又好用的迴圈之於前端開發者，就好比皮卡丘之於小智，那麼不可或缺。
BUT!!!為了挑戰更強的道館，必須要有其他的神奇寶貝啊～
為了從JS幼幼班畢業，必須要學會功能齊全又語意明確的陣列方法啊～

系列Ｉ來學習怎麼使用不會改變原陣列的Array Method吧！

• 上述每個方法的括弧中都可以放入一個callback function，且可以傳入三個參數，依序是

  1. 目前迭代處理的元素
  2. 目前迭代處理的元素的索引值
  3. 呼叫該方法的陣列

• reduce的callback function參數跟其他三者不同，依序是

  1. 累加器
  2. 目前迭代處理的元素
  3. 目前迭代處理的元素的索引值
  4. 呼叫該方法的陣列

以下用Wes Bos 的Javascript 30: Array Cardio 做為範例來特訓

• 要處理的資料是一個取名叫inventors的陣列，陣列每個元素是一個物件，物件中裝有發明家的姓名和生卒年資料。

const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];

關卡1: 從資料撈出發明家的全名

// 使用for-loop 

const fullNameList = [];
for (let index = 0; index < inventors.length; index++) {
    const fullName = inventors[index].first + ' ' + inventors[index].last;
    fullNameList.push(fullName);
};

console.log(fullNameList);

// 使用array method

const fullName = inventors.map( inventor => inventor.first + ' ' + inventor.last);

比較兩者可以發現陣列方法讓程式碼更簡潔

1. 不用建立儲存資料的空陣列，因為map的回傳值就是一個新的陣列
2. 不用寫for-loop裡頭的初始值，終止條件和迭代值
3. 不需要把資料push到建立的空陣列裡頭
4. 減少命名的困擾

關卡2: 撈出在16世紀（1500~1599）出生的發明家

// 使用for-loop
const inventorBornIn1500s = []; -> 代表需要新陣列

inventors.forEach(inventor => {
    // 代表資料需要符合特定條件才放入新陣列中
    if (inventor.year >= 1500 && inventor.year < 1600) {
        inventorBornIn1500s.push(inventor);
    };
});

// 使用array method

const inventorBornIn1500s = inventors.filter( inventor => 1500 <= inventor.year && inventor.year < 1600);

觀察心得：

1. 用條件式判斷了要撈出的資料
2. 建立了空陣列要裝撈出的資料
3. 符合上述兩點的話，可以派出filter方法應戰喔

關卡3: 計算資料中所有發明家在世的時間總和

const result = inventors.reduce((totalYears, inventor) => {
    const yearsLived = inventor.passed - inventor.year
    return totalYears + yearsLived
}, 0); 

// 這裡的累加器命名作totalYears
// 0 是指定的初始值

使用reduce要注意的小地方：

1. 記得回傳累加器，否則結果會出現undefined
2. 沒有設定初始值，就會以陣列第一個元素作為累加器

今日特訓到此結束，如果腦袋出現陣列方法排斥反應的話，沒關係的，至少我們還有迴圈皮卡丘可以依靠。
明天記得繼續來特訓喔～

參考資料及學習資源：

JAVASCRIPT 30
Array Methods - MDN