學習網站：javascript30
僅記錄JS及較複雜的CSS部分，若有不清楚或是歡迎留言討論，
謝謝(´｡• ω •｡`)
Ajax Type Aheady
Step ０. fetch介紹
- fetch可執行function
fetch(endpoint, function (data) {
console.log(data)
})- fetch回傳promise
const prom = fetch(endpoint)💫 延伸閱讀：
由前端request 的幾種方法. 寫了前端一段時間了，常常因為不同的專案使用不同的request方式而產生困惑，為… | by Tim Tsai | dot.JS | Medium
- fetch 會使用 ES6 的 Promise 作回應
- 需使用 then 作為告知fetch進行下一步動作
- 需要使用 catch 作為錯誤回應 (404, 500…)
- 回傳的為 ReadableStream 物件，需要使用不同資料類型(json,blob)使用對應方法，才能正確取得資料物件。
Step 1. 使用Fetch抓取資料，並轉換型別後丟入cities中
const cities=[];
fetch(endpoint)
.then(blob => blob.json()) //轉換成json資料型別
.then(data => cities.push(...data))//將data新增至cities中💫 延伸閱讀：鐵人賽：ES6 原生 Fetch 遠端資料方法 | 卡斯伯 Blog — 前端，沒有極限
‼️...data的用法：展開運算符(Spread Operator)(淺拷貝)
fetch(endpoint)
.then(data => cities.push(data))//將data新增至cities中
//結果：
//cities=[Array[1000]] (變成槽狀結構)fetch(endpoint)
.then(data => cities.push(...data))//將data中每個元素新增至cities中
//結果：
//cities=[Object, Object, Object...]
🔍參考資料：
💫 延伸閱讀：[Javascript] 關於 JS 中的淺拷貝和深拷貝 · Larry
Step 2. 篩選資料的function
function findMatches(wordToMatch,cities){
return cites.filter(place=>{
//錯誤：這樣判斷句子會是使用 'wordToMatch' 非變數
//return place.city.match(/wordToMatch/i)
//正確：將抓出變數中的值
const regex = new RegExp(wordToMatch,'gi')
return place.city.match(regex)||place.state.match(regex)
})
}🔍參考資料：
- [JS] 正則表達式(Regular Expression, regex) | PJCHENder 未整理筆記
- 正規表示式 Regular Expression
- Day30 什麼是 RegExp 正則表達式 ？ — iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
✏️ 建立一個正則表達式
一般使用斜槓表示開始及結束
正則表達式結合字串方法
match()：回傳比對後符合的結果陣列，若無符合對象，回傳 null
6.修飾符：
g修飾符：欲使比較對象爲字串全部時可以加上 g 修飾符，否則在一般狀況下可能只比較第一個符合的對象就停止了。i修飾符：表示比較條件不分大小寫
🔍參考資料：JavaScript RegExp 正規表示式 Regex, RE — JavaScript (JS) 教學 Tutorial
Step 3. 顯示資料的function-1(於console.log顯示keyin資料)
function displayMatches(){
//console.log(this.value)
const matchArray=findMatches(this.value, cities);
console.log(matchArray);
}
const searchInput = document.querySelector('.search');
const suggesttions = document.querySelector('.suggesttions');searchInput.addEventListener('change', displayMatches);//key下的字元
suggesttions.addEventListener('keyup', displayMatches);//組合成字串
Step 4. 顯示資料的function-2(顯示list)
function displayMatches(){
const matchArray=findMatches(this.value, cities);
const listhtml=matchArray.map(place => {
return `
<li>
<span class="name">
${place.city}, ${place.state}</span>
<span class="population">
${place.population}</span>
</li>
`;
}).join('');
suggestions.innerHTML=listhtml;
}const searchInput = document.querySelector('.search');
const suggesttions = document.querySelector('.suggesttions');searchInput.addEventListener('change', displayMatches);//key下的字元
suggesttions.addEventListener('keyup', displayMatches);//組合成字串
✏️ .join('') 快速的將 Array 轉換成 String(中間無,)
🔍參考連結：Array.prototype.join() — JavaScript | MDN
Step 5. 顯示資料的function-3(修飾list呈現)
function displayMatches(){
const matchArray=findMatches(this.value, cities);
const listhtml=matchArray.map(place => {
const regex=new RegExp(this.value, 'gi');
const cityName =
place.city.replace(regex, `<span class="hl">
${this.value}</span>`)
const stateName =
place.state.replace(regex, `<span class="hl">
${this.value}</span>`)
return `
<li>
<span class="name">${cityName}, ${stateName}</span>
<span class="population">${place.population}</span>
</li>
`;
}).join('');
suggestions.innerHTML=listhtml;
}Step 6. 套用第三方資源，將數字加上 ,
function numberWithCommas(x) {
return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",");
}function displayMatches(){
...
return `
<li>
<span class="name">${cityName}, ${stateName}</span>
<span class="population">
${numberWithCommas(place.population)}</span>
</li>
`;
}).join('');
...
}
✏️ 詳情參考
replace()：替換比對後符合的值。接收兩個參數，第一個參數爲正則表達式，第二個參數爲欲替換的值。
🐣延伸教學：
