目的：了解陣列用法，學會篩選找到想要的資料。

陣列方法：forEach 、 map 、 filter

根據這個影片 Big Boy Can Code 教學 手把手用 Filter 找到你的國家或地區的排名。
Javascript Filter 迴圈 | 快速找到疫情國家排名 | Coronavirus Country Ranking

疫情國家網站網址 ：連結

forEach

定義：

Array.forEach( 函數 )
將陣列列元素⼀個⼀個抓出來,帶入函數執⾏ 陣列元素如果是物件可以變更,不會產⽣新陣列

Toys.forEach(function(toy){
Toys.total = toy.discount * toy.price console.log(Toys.total)
})

map

Array.map( 函數 )
將陣列列元素⼀個⼀個抓出來,將執⾏結果存成另⼀個陣列

e.g. 做一數字陣列 相乘東西

let numbers = [1,2,3,4,5,6]
new_arr = numbers.map((item)=> item*item);
console.log(new_arr);

e.g. 將會員物件 取出名字還有物品總價

var newbooks= books.map((obj)=>{
   return {
    name : obj.name,
     total:obj.price*obj.discount
   }
})
console.log(newbooks);

filter

Array.filter( 函數 )
根據函數回傳值 ( True / False)決定要不要把元素複製到新陣列
let numbers = [1,2,3,4,5,6]; 找到大於三的數字

let num = [1,2,3,4,5,6];
let New_arry =num.filter((item)=>{
    return item>3
})

console.log(New_arry);

跟我們初學者一開始所學的 for 迴圈 做比較

for 用法

const items = ['item1', 'item2', 'item3'];
const copy = [];

for (let i=0; i<items.length; i++) {
  copy.push(items[i])
}

forEach 用法

const items = ['item1', 'item2', 'item3'];
const copy = [];

items.forEach(function(item){
  copy.push(item)
});

forEach 的語義是 for each …（對於每個…），在陣列上即是代表，對於每個去做操作。自然他會將每一個元素去傳遞進去console.log ，而不需要檢查邊界條件。

MDN定義

陣列元素並非只是一個值（value）這麼簡單，陣列的元素可能是一個物件，而我們常常在迴圈裡頭幹的另一件事，就是把我們感興趣的資料，另外拉出來成為一個新的陣列。

例如說：下面的陣列，如果我想要把身高拿出來，該怎麼做？

var character = [
  {
  name:'JOJO',
  height:195,
  weight:80
  },
  {
    name:'another',
    height:180,
    weight:77},
]

forEach 寫法：

var height=[];
character.forEach(item=>{
    height.push(item.height);
})
console.log(height);

map 寫法：

let Narr =character.map((item)=> item.height);
console.log(Narr);

如果我們希望把 偶數與奇數 index 的值分別放在另外兩個陣列裡頭，假設 arr = [0,1,2,3,4,5,6,7] 。

let oddArr = [], evenArr=[];

arr.forEach((item,index)=>{
  if(index%2 ===0){
    oddArr.push(item);
  }else{
    evenArr.push(item);
  }
})
console.log(evenArr); //[0, 2, 4, 6]

這次我們用 filter 用法

filter 方法允許我們在做一些條件篩選，最後依照 return 的結果來判斷要不要把陣列到另一個陣列裡頭。

let foddArr = arr.filter( (item,index) => index%2===0 )
console.log(foddAr) //[0, 2, 4, 6]

var people = [
  {
    name: 'Casper',
    like: '鍋燒意麵',
    age: 18
  },
  {
    name: 'Wang',
    like: '炒麵',
    age: 24
  },
  {
    name: 'Bobo',
    like: '蘿蔔泥',
    age: 1
  },
  {
    name: '滷蛋',
    like: '蘿蔔泥',
    age: 3
  }
];

找到age > 5歲的人

var agethen5 = people.filter((item)=>{
                return item.age>5
})
console.log(agethen5) // Casper, Wang 

Array.from

es6新特性中Array類多了一個靜態方法from，這個方法作用是將一個ArrayLike對像或者Iterable對象轉換成一個Array

這一類對像不能調用數組所具有的方法(push/forEach/map之類)，最常見的有兩種：DOM中的NodeList和函數中的arguments。

Array.from 把 race 物件拷貝一份並且轉變成一個新的陣列 raceArray

const race = {
  0: 'first rider',
  1: 'second rider',
  2: 'third rider',
  3: 'fourth rider',
  stadium: 'Motoarean',
  length: 5
}

let set =Array.from(race);
console.log(set);

我們在找網頁的 nodelist 就可以用 Array.from 讓變成陣列，

開始使用國家疫情網站來看排名

1.先用 document.querySelectorAll('tr') 找到 tr
2.用 Array.from() 包住 tr 變成陣列
3.查到國家在網頁裡面是在tr row 第一個
4.用 filter 方法找到每一個有 row 的 tr 但我們要找到 tr 的第一個 td 才有 國家名稱
5.用 cells 選 tr 裡面的 td ( cells 是用 console.dir 查到方法)

document.querySelectorAll('tr');
Array.from(document.querySelectorAll('tr')).filter(row=>{console.log(row)})

6.從 console.log 查到 rowIndex 可以找到排名 而 innerHTML 是尋找裡面的html,includes()語法有無查到 Taiwan

Array.from(document.querySelectorAll("tr")).filter((row,index) => {

if (row.cells[0].innerHTML.includes("Taiwan")) {
return row
}

})[0].rowIndex

查出目前 台灣115名

那我想查日本目前排名是多少 也是使用同樣的方法喔

Array.from(document.querySelectorAll("tr")).filter((row,index) => {

if (row.cells[0].innerHTML.includes("Japan")) {
return row
}

})[0].rowIndex

目前排名是30

參考資料：
JavaScript: Array.fromc
JavaScript 特殊对象 Array-Like Objects
JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]s