「JavaScript 30」學習筆記（六）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

製作一個輸入框的候選詞的功能。

筆記

宣告一個 cities 空陣列。

const cities = [];

---

使用 fetch() 方法取得要使用的 JSON 檔。

fetch(endpoint)
    .then(blob => blob.json())
    .then(data => cities.push(...data));

以下方法具有同樣效果：

Blob (Binary Large Object)
.then(function(response) { return response.json(); })
.then(function(data) { return cities.push(...data); });

• Blob 物件代表了一個相當於檔案（原始資料）的不可變物件。
• ... 展開運算子，允許從可反覆執行的運算式（例如其他陣列常値）初始化陣列常値的某些部分，或允許將運算式展開成多個引數（在方法呼叫中）。

---

設定一個 findMatches() 的方法，用於根據輸入字串尋找查詢結果。

function findMatches(wordToMatch, cities) {
    return cities.filter(place => {
        const regex = new RegExp(wordToMatch, 'gi');
        return place.city.match(regex) || place.state.match(regex);
    })
}

• filter() 方法會建立一個經指定之方法運算後，由原陣列中通過該方法檢驗之元素所構成的新陣列。
• RegExp() 物件用來建立正規式：第一個參數是正規式的內容，第二個參數是 flag。
• g 表示 Global search，尋找整份文件，而不會找到就停。
• i 表示 Case insensitive，表示不區分大小寫。
• match() 方法可在字符串内找到指定的値，或找到一个或多個正規式的匹配。

---

設定一個 numberWithCommas() 的方法，用於表達千分位。

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

• toString() 方法會可把一個邏輯値轉換為字符串，並返回結果。
• \B(?=(\d{3})+(?!\d)) 是千分位的正規式。

---

設定一個 displayMatches() 的方法，用於顯示候選詞。

function displayMatches() {
    const matchArray = findMatches(this.value, cities);
    const html = 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">${numberWithCommas(place.population)}</span>
            </li>
        `;
    }).join('');
    suggestions.innerHTML = html;
}

• replace() 方法會在字符串中用一些字符替換另一些字符，或替換一個與正規式匹配的字串。
• join() 方法會把陣列中的所有元素放入一個字符串。
• innerHTML 屬於 HTML DOM 的一種功能，可以取得或設定其中元素，也可以將字串寫入其中。

---

取得 .search 和 .suggestions 元素。

const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

監聽使用者輸入框，在發生 change 或 keyup 行為時，觸發 displayMatches() 方法。

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);