就决定是你了 - 阵列系列Ｉ

图片来源：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