JavaScript30-Sort-Without-Articles-17

又過了一週，
冬天好像來了，原本應該懶散，但好像有什麼驅使著我行動，
慢慢地好像都走上了軌道，
吃了火鍋，打了場球，暖了胃，腎上腺素，讓人瘋狂了點。

這篇的內容又比上一篇更簡單了一點，
也許是我變得更厲害了…嗎
開始抓空擋刷題了，
24歲的年末，朝著未來更努力一點，
想變成一個可以被依賴的人，
想走向世界，想要踏進功能的房間，
24一直是我最喜歡的數字，
今年真的經歷了很多事情，
感覺過得很充實，
也希望另一個24，可以知道這裡有一個在努力的人，
偶而來我夢境打擾一下，給我點心連心的感覺。
距離今年還有一小段時間，
來吧！讓我感覺到，我不是一個人好嗎？

不斷在打破自己的規則，
好像越來越沒有原則，
但其實也不是真的重要的堅持，
每隔一段時間，
重新認識一次自己也不是什麼壞事，

人真的很特別。
如果不鼓起勇氣，永遠不知道自己其實沒有這麼不堪，
時間的淬煉，好像讓我看起來像是一個玩咖，
給人一種高手出招，
但其實事實不是這樣的，
只是想要去嘗試一些沒做過的事，
嘗試一些做法，或許會有新的靈感，
就像面對人生難題的時候，拿著紙筆瘋狂運算也不會知道答案，
可能去刷刷牙就豁然開朗；可能做一些平常不會做的事情，就會到新的層級，
從被動，轉換主動，從冷靜，到一頭栽進去，
如果跨越了一個習慣，
想法就會更不同了。

有的時候很享受攻防戰，總覺得來來往往猜不到結果很有趣，
但好像都堅持不久，
胡思亂想著這場仗真的會贏嗎？
想著說不定對手只是不想一擊必殺，
可能哪一天就直接千軍萬馬打得潰不成軍，
真希望能培養出一種看穿人的能力，
這樣就不用猜的這麼辛苦了，

試探。沒想過靜靜的對談，內心會萬馬奔騰，
難怪古時候，攻城時不會發動奇襲，都是領主對談，
展現自己的氣宇軒昂，天之驕子的氣場，
也許是讓對手有未開戰先認輸的想法，

現在的我如同兵臨城下、八公草木，
也會藏的很好，像個不凡的人，
也許這也是成功的一環。

飄著雨的中山北路，走過不知道多少次的士林夜市，捷運底下的長椅，
真的好久，好久，好久，
沒有靜下心來好好享受生活帶來的喜悅，
曾經我不相信，人跟人可以有這麼大的影響，
但經歷了內心的轉折，個性都變了，
變得失去喜悅，戴上了虛偽但爛漫的笑容；

但人也會再讓人改變，
在被觸及一個人孤獨的恐懼，也許就會看到最美的風景，
無力抗拒，那安穩的距離。

17 - Sort Without Articles

首次上傳：2020/11/26

主題

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

步驟

Step1. 建立篩選的function

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

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

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

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

//原本的寫法
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>元素放置

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

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

其他

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

[DEMO]