iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
0
自我挑戰組

JavaScript 30 挑戰日誌系列 第 4

Day 04:陣列習題 (1)

作品 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ˊ//


上一篇
Day 03:操控 CSS 變數
下一篇
Day 05:使用 class 控制 flex
系列文
JavaScript 30 挑戰日誌8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言