「JS30紀錄＆心得」17- Sort Without Articles

發表於 | 分類於 | 0 Comments

主題

介紹如何將陣列在排除部分文字的情況下排序。

[DEMO]｜ [GitHub] ｜[JavaScript30全列表]

步驟

Step1. 建立篩選的function

使用replace搭配正規表示式來將包含了a, the, an開頭的文字替換為空白。

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

Step2. 對目標陣列進行篩選與排序

這裡將原本的寫法與簡寫放在一起，可以發現整體簡潔不少。

1
2
3
4
5
6
7
8
9
10
//原本的寫法
const sortedBands = bands.sort(function(a, b){
    if(strip(a) > strip(b)) {
        return 1;
    }else {
        return -1;
    }
})
//利用箭頭函數與三元運算式的簡寫：
const sortedBands = bands.sort((a, b) => (strip(a) > strip(b)) ? 1 : -1);

Step3. 把排序完的渲染到HTML中

使用map與join來組成<li>元素放置

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

使用join(‘’)修改連結符號為空白, 否則原先陣列的分隔符號是,也會一併渲染在html中。

其他

這篇相對比較簡單一些，
運用到都是之前有練習過的語法:D