[JavaScript 30]Day17-Sorting Band Names without articles

今天要練習依照字母開頭，排序一組陣列內的樂團名稱，且須過濾掉不必要的 "The, A, AN" 開頭，再進行排序，最後將陣列轉成 html 字串，顯示於頁面上。

學習重點

• 排序 : .sort()
• 過濾、篩選 : .replace() + 正規表達式
• 組成 html 字串 : .map()、.join('')

觀察範例檔案初始狀態

HTML

<ul id="bands"></ul>

CSS

已有預先寫好的樣式，但今天練習只著重在 JS 資料處理，需要樣式的話，可至最底下連結下載。

JS

已有一個包含所有樂團名稱的 bands 陣列 :

const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];

(最後完成的完整 JS 程式碼，以及檔案下載、課程連結，將放在最下方)

解決思路

一、排序

二、製作一個過濾器，過濾掉不需要的 "The, A, AN"

三、顯示於頁面上

一、排序

直接使用 .sort() 對 bands 陣列做排序

會得到以下結果 :

但我們希望能過濾掉 "The, A, AN" 這些開頭，再做排序。

二、製作一個過濾器，過濾掉不需要的 “The, A, AN”

我們可以透過使用 .replace() + 正規表達式，製作一個 strip 方法作為過濾器，並且只套用在比對時的 a、b 上，而不是去改變一整個原本的陣列。

利用 .replace() + 正規表達式，將 "The, A, AN" 用空字串取代，再利用 .trim() 去除空格。

這時候的資料就能變成我們希望呈現的順序 :

而上面這段 sortedBands 程式碼，也可以利用三元運算子及 ES6 箭頭函式寫法，簡寫為一行 :

三、顯示於頁面上

最後我們要將剛剛排序好的陣列資料顯示於頁面。

1. 將剛剛排序完成的 sortedBands 陣列利用 .map() 重新組成帶有一項一項 html 字串的新陣列。
2. 利用 .join('') 將陣列內一項一項的字串，連接、合併成一個大字串。
3. 抓取 html 的 <ul id="bands"></ul> 元素 DOM。
4. 利用 innerHTML 的方法，顯示於頁面上。

到這邊就完成今天的小練習囉~

完整 JS 程式碼

const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
function strip(bandName) {
  return bandName.replace(/^(a |the |an )/i, '').trim();
}
const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
document.querySelector('#bands').innerHTML =
  sortedBands
    .map(band => `<li>${band}</li>`)
    .join('');
console.log(sortedBands);

參考資料

範例檔案下載 :

GitHub - wesbos/JavaScript30: 30 Day Vanilla JS Challenge

JavaScript 30 課程註冊連結(輸入 email 免費註冊) :

JavaScript 30