將資料去掉 The/A/An 冠詞開頭後進行排序，再將原資料照排序結果渲染至畫面上

• 陣列排序：Array.prototype.sort()
• 正規表達式：Regular expressions

觀察 index-FINISHED.html 的完成畫面，可以觀察到排序的方法是將原資料陣列的每項去掉 The/A/An 冠詞開頭後進行排序，再將原資料照排序結果渲染至畫面上，因此我們要用到 Day4 學習到的Array.prototype.sort()，依據我們上述的邏輯將資料排列。

bands.sort((a, b) => {
  return a.replace("The ", "").replace("A ", "").replace("An ", "") >
    b.replace("The ", "").replace("A ", "").replace("An ", "")
    ? 1
    : -1;
});

這樣寫完是不是覺得程式碼很醜呢？開始著手改寫

1. 這裡我們利用replace()method 可以使用正規表達式regular expression的特性加以結合，並提成函式複用。

function replaceArticle(str) {
  //將開頭為 a 或 an 或 the 的部分(不分大小寫)全部取代成空字串，並使用trim() method將頭尾的空白符號都清乾淨
  return str.replace(/^(a |an |the )/i, "").trim();
}

2. 將原本的排序邏輯使用replaceArticle改寫成以下

bands.sort((a, b) => {
  //將陣列內各個字串都丟進replaceArticle處理並依回傳的字串進行升序排列
  return replaceArticle(a) > replaceArticle(b) ? 1 : -1;
});

3. 最後將處理後的陣列渲染至畫面上

//  先取得列表節點
const ul = document.querySelector("#bands");
//  創建文檔片段
const fragment = document.createDocumentFragment();
bands.forEach((item) => {
  //  陣列每個元素都創造<li>tag並添加至文檔片段中
  const li = document.createElement("li");
  li.textContent = item;
  fragment.appendChild(li);
});
//  最後再將文檔片段實際渲染至畫面上
ul.appendChild(fragment);

👉Github Demo 頁面 👈

👉 好想工作室 15th 鐵人賽看板 👈

參考資料

1. Javascript 30 官網
   https://javascript30.com/
2. MDN 官網
   https://developer.mozilla.org/en-US/