WES BOS系列影片
Alex快速導讀系列影片

做完基礎陣列練習後，來做些進階的練習

進階練習目標 :
6.Sort the inventors by years lived
7.create a list of Boulevards in Paris
that contain 'de' anywhere in the name
8.sort Exercise
9.Reduce Exercise

5.先算出年紀後再做 sort()
Sort the inventors by years lived
目標:根據這些發明家的年紀做排序

const oldest = inventors.sort((a, b) => ((a.passed - a.year) - (b.passed - b.year)))
console.log(oldest)

6.create a list of Boulevards in Paris that contain ‘de’ anywhere in the name
網站中有巴黎壁畫的資料檔
巴黎的壁畫
目標:請抓出含有"de"字元的壁畫資料,並做成一個清單

這題要直接於F12的console中製作，嘗試從網站中直接抓取需要的值
並注意querySelectorAll()選出的元素，只是類陣列 (類陣列只支援 forEach 與 filter)
我們要先用Array.from()將類陣列轉為陣列後再做後續的操作

let peoples = document.querySelectorAll('.mw-category-group a');
let array = Array.from(peoples)
let newList = array.map(item => {return item.innerHTML})
let result = newList.filter(name=>{
  return name.includes('de')
})

7.Sort the people alphabetically by last name
目標:透過last name按字母順序，去排序people這筆陣列

這裡用到ES6的解構賦值
依序將people陣列中的字串丟入比較，丟入的同時我們也將字串用split(', ')做切分
例如 比較 'Beck, Glenn' 與 'Becker, Carl' 這兩個字串
參數a = 'Beck, Glenn'
參數b = 'Becker, Carl'
丟進排序的同時，我們也同時可以得到
aLast = 'Beck' , aFirst = 'Glenn'
bLast = 'Becker' , bFirst = 'Carl'
於是就可以單純的比較 aLast 與 bLast 了 ，這邊是比較字母順序

• 回傳 1 即 aLast字母順序在 bLast 之後
• 回傳 -1 即 aLast字母順序在 bLast 之前
• 回傳 0 即 aLast字母順序與 bLast 一樣

const alpha = people.sort((a, b) => {
  const [aLast, aFirst] = a.split(', ');
  const [bLast, bFirst] = b.split(', ');
  return aLast > bLast ? 1 : bLast > aLast ? -1 : 0;
});
console.log(alpha);

8.Sum up the instances of each of these
目標:data陣列中每個項目各有幾個? 並製作成一個物件

設定obj的初始值為空陣列
接著開始遍歷陣列中的每個字串，同時也看字串是否存在obj中，如果存在就++

const transportation = data.reduce((obj, item) => {

if (item in obj) {
  obj[item]++;
}
else {
  obj[item] = 1;
}
return obj;
}, {});

console.log(transportation);

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30