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

主題

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

[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中

使用mapjoin來組成<li>元素放置

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

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

其他

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