第六堂 – Type Ahead

 邏輯流程
將JSON資料存成一個Array
寫一個字母匹配的函式，其回傳值為匹配成功之Array
寫一個展示匹配成果的函式，將匹配成功之Array包裝成html
監聽輸入文字的動作，執行上一步之函式
將關鍵字highlight，並格式化人口數字
課程重點
fetch()：是HTML5的API，用來發送http request。如實作範例中，fetch(URL)回傳的是一個promise物件，我們能用then()來處理這個promise，而then()所回傳的物件仍是promise。promise的_proto_裡面有json()函式，而我們知道目標URL回傳的是JSON，因此在第一個then()中，我們將promise做.json()處理，接著在第二次then()將一筆筆資料放進Array。

match()：本實作的重要函式，用來做字串比對，配合Regular Expressions使用。

Regular Expressions：正規表示式，用來設計字串的pattern，進行比對用。例如今天想要在一篇文章中找出含有底線及1~5及小寫英文字的字串(什麼時候會有這種需求)，這時候就需要用正規表示式來設計你要的search pattern。

在實作裡我們用new RegExp(wordToMatch, ‘gi’);產生pattern。wordToMatch是使用者輸入的字串，也就是說我們要根據這個字串在Array中進行搜尋，判斷是否有包含這個字串的資料。那後面的’gi’是兩個參數g和i，g是global matching，回傳全部符合的字串。i是case-insensitive matching，不分大小寫。另外還有m，multiline matching，能夠在多行搜尋。

join()：將Array變成一個string。實作中將join()加入參數”，參數要放的是separator，預設是用逗號分隔。但我們不希望html字串中有逗號，因此用單引號裡面不放東西，就不會有任何分隔符號。

延伸閱讀
ES6 spread：在實作中我們看到在fetch資料的時候，做了一件事cities.push(…data)，那個”…”就是spread，也就是把data這個Array拆開，一個一個push進cities。若不做spread的話，cities就會變成一個Array裡面還有一個data Array。
格式化數字：實作中最後步驟就是把一串人口數字給格式化，變成每三位數一個逗號，方便閱讀。這時候就需要Regular Expression，而老師也是直接貼一段code給大家複製。以下是格式化數字的範例：
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’);
}