作品 Demo 連結: 傳送門
(請按下 F12 開啟開發者工具並進入 Console 頁籤)

作品目標：使用本身提供的陣列，透過 JavaScript Console 出題目所要的答案。
難易度：★★★☆☆

JS - 課程提供的陣列 (inventors 後方註解是我算出來的享壽年齡)

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

const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];

今日的挑戰跟往常不同的，
是習題式、一題一題去解出答案，
我們就慢慢一題一題的解決吧! GO!

【第一題：列出所有出生於 1500's 年代的發明家(Inventors)】

const fifteens = inventors.filter( inventor => inventor.year >= 1500 && inventor.year < 1600);
console.table(fifteens);

陣列所有的功能都是會在處理過後 另外再產出新的陣列，並不會影響到原陣列
所以需要另外新增一個變數來存放處理過後的新陣列
這一題就是把新陣列存放在 fifteens 變數裏頭。

這題需要使用到的是 .filter 過濾功能
他會依序遍歷所有內容
設定判斷式後，只要 return 為 true 的話就會加入新陣列

我們在 .filter 內定義的第一個參數 inventor 代表的是目前當下的內容值
(此處內容值為物件)
後面我們就回傳一個判斷式:
如果這個物件的屬性 year 的值 >= 1500 並且 < 1600 則為 true
即放入新陣列，這樣就完成囉!

// Console 內容
0:{first: "Galileo", last: "Galilei", year: 1564, passed: 1642}
1:{first: "Johannes", last: "Kepler", year: 1571, passed: 1630}

【第二題：列出所有發明家的姓和名】

const fullName = inventors.map( inventor => `${inventor.first} ${inventor.last}`);
console.log(fullName);

map() 其實跟 forEach() 遍歷有點像
只是 map() 處理過後會直接回傳全新的陣列
使用 forEach() 則要自己另開一個陣列邊處理邊 push 進去

這裡是把所需的屬性 .first & .last 合併成字串回傳至新陣列，
最後使用 console.log 列印出來，

所以如果只是打算單純遍歷，請使用 forEach()
需要處理元素更新陣列，請使用 map()

【第三題：將發明家的生日做排序，從老到年輕】

const ordered = inventors.sort((lastInventor, nextInventor) => 
    lastInventor.year < nextInventor.year ? -1 : 1
);
console.table(ordered);

sort() 用於陣列排序
在參數中至少帶入兩個參數，有兩個東西才可以比較作排序
分別代表著: 目前元素 與 下一個元素

這裡三元判斷式意思是
如果 目前人物的生日 < 下一個人物的生日
則位置不交換 (因為年紀大的本來就是需要放在前面)
反之則交換

【第四題：所有發明家的總歲數是多少?】

const totalLive = inventors.reduce((counter, inventor) => counter + (inventor.passed - inventor.year), 0);
console.log(`Total: ${totalLive}`);

這一題使用到我從沒用過的 reduce()
reduce() 是用來做 加總 用的
過去我是宣告一個變數做統計再使用 forEach 去處理真的太麻煩
原來 JavaScript 早就有寫好的 function 了!!!

reduce() 必須要有兩個參數
第一個：計數器
第二個：目前元素

function 內部是將 counter 加上我們所需要的 目前發明家的年齡
比較需要注意的是 function 後面還有一個參數
那是設定 counter 的初始值，非常的貼心跟方便!

【第五題：排序所有發明家的壽命，從長到短】

const orderedLive = inventors.sort((lastInventor, nextInventor) => 
  (lastInventor.passed - lastInventor.year) < (nextInventor.passed - nextInventor.year) ? 1 : -1
);
console.log(orderedLive);

這裡則是再一次使用了 sort()
將兩人的壽命計算出來之後做比較
如果小於的話就兩個排序顛倒
反之則不動!

陣列的處理真的是不簡單呀
其實這裡還有兩題因為時間緣故我還沒有解出來
之後有時間會再補上的!

繼續加油!!!
LEVEL UP!!!! ˋAˊ//