JS30_04— Array Cardio Day 1

Huang Pei
6 min readOct 22, 2019

--

學習重點:filter/map/sort/reduce

filter() 方法會建立一個經指定之函式運算後,由原陣列中通過該函式檢驗之元素所構成的新陣列

map() 方法會建立一個新陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。

sort()方法會原地(in place)對一個陣列的所有元素進行排序,並回傳此陣列。排序不一定是穩定的(stable)。預設的排序順序是根據字串的 Unicode 編碼位置(code points)而定。

reduce() 方法將一個累加器及陣列中每項元素(由左至右)傳入回呼函式,將陣列化為單一值

includes()用於判斷一個字符串是否包含在另一個字符串中,根據情況返回 true /false

  1. Filter the list of inventors for those who were born in the 1500's
let fifteen = inventors.filter( inventor =>    inventor.year >= 1500 && inventor.year < 1600)回傳符合條件式之新陣列

2. Give us an array of the inventor first and last names

let fullNames = inventor.map(inventor =>    `${inventor.first} ${inventor.last}`)

3. Sort the inventors by birthdate, oldest to youngest

返回重新排列過的原陣列

法一 let ordered1 = inventors.sort((a, b) =>
b.year - a.year) //a-b升冪,b-a降冪
法二 let ordered2 = inventors.sort((a, b) =>
a.year > b.year ? 1 : -1); //不適用非數值

4. How many years did all the inventors live?

法一(自己的)let eachLiveYear = inventors.map(inventor=>
inventor.passed — inventor.year) //取出所有inventor的年齡
let totalLiveYear = eachLiveYear.reduce((acc, cur) =>
acc = acc + cur) //進行相加
_____
法二(教學)let totalLiveYear=inventors.reduce((acc,cur)=>{
acc = acc+(cur.passed-cur.year)
return acc},0)
*初始由0開始

5. Sort the inventors by years lived

法一(自己的)let sortedYearLived = inventors.sort((a, b) =>
(b.passed — b.year) — (a.passed — a.year))
法二(教學)const oldest = inventors.sort(function(a, b) {
const lastInventor = a.passed - a.year;
const nextInventor = b.passed - b.year;
return lastInventor > nextInventor ? -1 : 1;});

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

let links = Array.from(document.querySelectorAll(‘.mw-category a’)) //為一nodelist,轉為陣列並選取所有目錄下的連結let linkName = links
.map(link =>link.textContent)//獲取所有文字名稱
.filter(streetName=>streetName.includes(‘de’))
//找出符合包含de的字(為true)並回傳陣列

將類陣列轉為陣列的方法:

1. Array.from(類陣列)
2. [...類陣列]

7. Sort the people alphabetically by last name

法一(自己的)let peopleName = people
.map(name => name.split(', ')) // 先拿掉, 變成姓名陣列
.sort((a,b) => a[1] > b[1]?1:-1) //進行升冪排列
.map(name=>name.join(', ')) // 加回,
法二(教學)let alpha = people.sort(function (lastOne, nextOne) {
const [aLast, aFirst] = lastOne.split(‘, ‘)
const [bLast, bFirst] = nextOne.split(‘, ‘)
return aLast > bLast})

8. Sum up the instances of each of these

const data = [‘car’, ‘car’, ‘truck’, ‘truck’, ‘bike’, ‘walk’, ‘car’, ‘van’, ‘bike’, ‘walk’, ‘car’, ‘van’, ‘car’, ‘truck’, ‘pogostick’];

法一(自己的)let trans = [...new Set(data)] //列出每種交通工具唯一值
trans.map(num => `${num}: ${data.filter(trans => trans === num).length}`) // filter的長度就是每個交通工具的數量
=> ["car : 5", "truck : 3", "bike : 2", "walk : 2", "van : 2"]法二(教學)let transportation = data.reduce((obj, item) =>
{ if(!obj[item]){ obj[item]=0; }
obj[item]++
return obj}, {})
....好難看不懂 >_________<

--

--

Huang Pei
Huang Pei

Written by Huang Pei

記錄用倉庫,歡迎指正。菜鳥前端,最菜的那種(超能力少女です)。

No responses yet