參考出處 JS 30 DAY 4

參考出處 Alex 宅幹嘛

今天要練習的是在 JS 常用來處理陣列的方法：

Array.prototype.filter()
Array.prototype.map()
Array.prototype.sort()
Array.prototype.reduce()

實作

我們有三份資料分別是 investors、people、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 }
    ];

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

Array.prototype.filter()

filter 就是過濾，所以我們可以用下面的條件去過濾出我們要的東西。

條件是 Filter the list of inventors for those who were born in the 1500's

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

Array.prototype.map()

用 map() 的時候需要回傳一個值，然後它透過函式內所回傳的值組合成一個陣列。

條件是 Give us an array of the inventors first and last names

ES 6 提供的箭頭函式會直接回傳值，所以下面的 code 可以直接回傳新的陣列。

let ans = inventors.map( inventor => inventor.first + ' '+ inventor.last)

Array.prototype.sort()

sort() 是排序，根據下面的條件，我們要由小排到大。

條件是 Sort the inventors by birthdate, oldest to youngest

sort 的概念是:

1. 基本上會由小排到大
2. 會把兩個數值拿出來做比較，下面用的方式是
   假設 a-b <0 a 的年份就會排前面，
   == 0 順序就不會變，
   <0 a 就會排後面。

let ans = inventors.sort( (a,b) => a.year - b.year)

Array.prototype.reduce()

reduce() 是要把內容做相加。

條件是 How many years did all the inventors live all together?

reduce 有兩個部分，第一個部分是要執行的 function，第二個部分是初始的起始值。

第一個 total 的數值是 0 , 接著找到第一個 inventor 的 歲數，然後繼續累加到結束。

let total = inventors.reduce((total,inventor)=>{
    return total + inventor.passed - inventor.year
},0)

重複練習

下面是一樣的概念但是不同的練習。

1. 排列投資人的歲數。

條件 Sort the inventors by years lived

一樣是兩個數值做比較，用下面的方法就可以排列出我們要的答案

let ans = inventors.sort((a,b) => {
    retuen (a.passed - a.year) -(b.passed - b.year)
} )

2. 把姓用字母順序排列

條件是 Sort the people alphabetically by last name

let ans = people.sort((a,b) =>{
let [aFirst,aLast] = a.split(',')
let [bFirst,bLast] = b.split(',')

  return aLast >bLast ? 1 : bLast > aLast ? -1 : 0

這裡用了一個三元運算：

這句的意思是： 如果 a >b 那就是 1 ，不然就做後面的部分 ':'這是不然的意思

aLast >bLast ? 1 : bLast > aLast ? -1 : 0

這句跟下面的 code 一樣

  if (aLast >bLast){
    1
  }else if(bLast > aLast){
  -1
  }else{
  0
  }  

3. 把下面的 data 陣列計算出每個種類有幾個

條件是 Sum up the instances of each of these

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

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

if(!obj[content]) 意思是之前沒出現過，這次出現了， 所以 obj[content] = 1

如果出現過了，他出現過的次數再加 1 次

上面 console 出來的結果會是：

Object {
  bike: 2,
  car: 5,
  truck: 3,
  van: 2,
  walk: 2
}

以上，明天見