# 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= // ----- 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 ``` ![](https://i.imgur.com/IfheuV9.png) ### findIndex ```javascript= let index = Array.from(document.querySelectorAll("tr")).findIndex(row => row.cells[0].innerText === "Taiwan") console.log(`台灣的排名是 : ${index}`) ``` > Net Chen #### \`$` 反引號backticks ```javascript= 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) ![](https://i.imgur.com/FMUgepN.png) * [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">![](https://i.imgur.com/zhzNVcv.png)</div> <div style="display:none">``</div>