0

## 從疫情國家網站 重新認識 陣列用法(forEach 、 map 、 filter)

Javascript Filter 迴圈 | 快速找到疫情國家排名 | Coronavirus Country Ranking

## 定義：

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( 函數 )

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 用法

``````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定義

``````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);
``````

``````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 方法允許我們在做一些條件篩選，最後依照 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
}
];
``````

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

### Array.from

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

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);
``````

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

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
``````

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

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

})[0].rowIndex
``````