04 - Array Cardio Day 1

專案簡介

第四天要實作的目標是學會陣列的排序和篩選，我們會拿到一份 inventors 和 people 的 List，接著要解開 8 題關於 List 的應用問題

課程影片：JS30 04
導讀影片：Alex

初始文件

Github 檔案位置：04 - Array Cardio Day 1

網頁一開始的樣子如下，有兩個 List 和八道題目

正式製作

流程

今天要做的事情比較單純，就是解開八題題目而已

Array.prototype.filter()
1. Filter the list of inventors for those who were born in the 1500's

Array.prototype.map()
2. Give us an array of the inventors first and last names

Array.prototype.sort()
3. Sort the inventors by birthdate, oldest to youngest

Array.prototype.reduce()
4. How many years did all the inventors live all together?

5. Sort the inventors by years lived

6. create a list of Boulevards in Paris that contain 'de' anywhere in the name

7. sort Exercise
Sort the people alphabetically by last name

8. Reduce Exercise
Sum up the instances of each of these

第一題

題目內容

會用到的函式介紹 -> Array.prototype.filter()

• Filter the list of inventors for those who were born in the 1500's

Data

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 }
    ];

解法

我們可以利用 filter() 篩選出 data 中出生年是在 1500 ~ 1600 之間的數據

let ans = inventors.filter(inventor => {
  return inventor.year >= 1500 && inventor.year < 1600;
})
console.table(ans);

第二題

題目內容

會用到的函式介紹 -> Array.prototype.map()

• Give us an array of the inventors first and last names

解法

我們可以利用 map() 將數據中的 first name 和 last name 組合起來，組成新 List

let ans = inventors.map(inventor => inventor.first + ', ' + inventor.last);
console.log(ans);

第三題

題目內容

會用到的函式介紹 -> Array.prototype.sort()

• Sort the inventors by birthdate, oldest to youngest

解法

我們可以利用 sort() 以數據中的 year 為權重，排序為新的 List，由於 sort() 排序判定的值為 1, 0, -1，我們可以直接採用相減的方式

 let ans = inventors.sort((a , b) => {
  return a.year - b.year; 
})
console.table(ans);

第四題

題目內容

會用到的函式介紹 -> Array.prototype.reduce()

• How many years did all the inventors live all together?

解法

我們可以利用 reduce() 將 ans 累加值初始化為 0，再逐步加上每個 data 的 passed - year 取得所有人總共存活的年數

 let ans = inventors.reduce((ans, inventor) =>{ // 累加器
  return ans + inventor.passed - inventor.year;
}, 0) // ans 初始值
console.log(ans);

第五題

題目內容

會用到的函式介紹 -> Array.prototype.sort()

• Sort the inventors by years lived

解法

我們一樣可以利用 sort() 來解決這一題，這次用到了兩個 三元運算子

let ans = inventors.sort((a, b) =>{
  // const aLive = (a.passed - a.year);
  // const bLive = (b.passed - b.year);
  // return aLive > bLive ? -1 : aLive < bLive ? 1 : 0;
})
console.table(ans);

第六題

題目內容

• create a list of Boulevards in Paris that contain 'de' anywhere in the name
• https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

解法

這一題想告訴我們的是querySelector() 回傳的不是 List 而是 NodeList，因此裡面沒有 filter() 函式，我們可以用 Array.apply 來將他轉換為 List

document.querySelector('mw-category-group ul li a')
let ans = document.querySelectorAll('.mw-category-group ul li a')
w = Array.apply(null, ans)
ans = w.filter(ww =>{return ww.title.indexOf('de') !== -1})
ans.forEach(i => { console.log(i.title)})

第七題

題目內容

• Sort the people alphabetically by last name

解法

在這裡我先利用了 map() 去將 people List 的名字分為姓和名，再利用剛學到的 sort() 以 a[1] 的 last name 排序

let newPeople = people.map(owo => {
  return owo.split(', ');
})
console.table(newPeople);

let ans = newPeople.sort((a, b) => {
  return a[1] > b[1] ? 1 : -1;
})
console.table(ans);

第八題

題目內容

• Sum up the instances of each of these

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];

解法

我們可以利用 reduce() 處理，ruduce() 的計數器可以初始化為空物件，就能夠直接以 obj[content] 的方式解決問題

let ans = data.reduce((obj, content) =>{
  if(!obj[content]) obj[content] = 1;
  else obj[content] += 1;
  return obj;
}, {})
console.table(ans);

最後程式碼

詳見 > 最後的成品

結語

以上是第四天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

JavaScript Array Cardio Practice - Day 1 — #JavaScript30 4/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽：Day 4：Array Cardio Day 1
MDN Web Docs