iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 24
1
Modern Web

實作經典 JavaScript 30系列 第 24

Day24: Sort Without Articles

WES BOS系列影片
Alex快速導讀系列影片

今天要結合正規表達式跟sort()來做排序的功能
作者這邊假設了一個情境
就是我們拿到了一串樂團的清單,
希望可以用樂團的名稱做排序,
討厭的地方是,有些有單位,有些又是只有樂團名稱
所以我們需要利用正規表達式將單位字做排除。

1.先把畫面渲染出來
所以可以先抓取要使用的DOM元素,
並把組好的<li>字串塞入

document.querySelector("#bands").innerHTML = 
bands.map((band) => `<li>${band}</li>`).join("");

這樣可以看到還未排序的清單

2.先試試看最原始的sort()

bands.sort((a, b) => a > b ? 1 : -1);


這裡可以談談字串是如何做比對
"a"(字串) 為什麼小於 "b"(字串)
其實都是用charCodeAt()來做比對

console.log("a".charCodeAt())//97
console.log("b".charCodeAt())//98

97 < 98 就很合理囉!

3.利用正規表達式來去除單位字 A、An、The

function strip(bandName) {
    return bandName.replace(/^(a |the |an )/i, "").trim();
}

4.將函式帶入sort()

bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);

現在我們就可以跳過單位,直接比對樂團名稱了

今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day23: Mouse Move Shadow
下一篇
Day25: Adding Up Times With Reduce
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言