# Javascript Filter 迴圈 | 快速找到疫情國家排名 | Coronavirus Country Ranking
###### tags: `JavaScript` `2020/03/18`

## 影片
{%youtube KiXpOVS2oEQ %}
> Big Boy Can Code
## 主題
https://www.worldometers.info/coronavirus/ 網站上並沒有排名，該如何使用JavaScript 的方法快速知道台灣現在排名

## 三種方法
* 直接到上方目標網站，F12 打開 DevTools，在 Console 輸入其中一種就可以

// ----- Javascript foreach
Array.from(document.querySelectorAll("tr")).forEach((row, index) => {
if (row.cells[0].innerHTML.includes("Taiwan")) {
console.log( index)
}
})

// ----- Javascript Map 
Array.from(document.querySelectorAll("tr")).map((row,index) => {

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

// ----- Javascript filter
Array.from(document.querySelectorAll('tr')).filter(row =>{
    if(row.cells[0].innerHTML.includes('Taiwan')){
      return row   
    }
})[0].rowIndex


### findIndex

let index = Array.from(document.querySelectorAll("tr")).findIndex(row => row.cells[0].innerText === "Taiwan")
console.log(`台灣的排名是 : ${index}`)

> Net Chen
#### \`$` 反引號backticks

console.log(`台灣的排名是 : ${index}`)
//相同於
console.log('台灣的排名是 :'  + index)

* [What is the `$` 's meaning in this code?](https://stackoverflow.com/questions/41117482/what-is-the-s-meaning-in-this-code)

* [JavaScript innerHTML 與 innerText 的差異](https://www.wibibi.com/info.php?tid=402)

## 想知道更多陣列處理技巧:gem:

* [JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()] -卡斯伯](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)

<a href="大圖開新分頁"><img src="縮圖網址"></a>

<div style="display:none"></div>

<div style="display:none">``</div>