前言

JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compilers、No Libraries、No Boilerplate 在30天的30部教學影片裡，建立30個JavaScript的有趣小東西。

另外，Wes Bos 也很無私地在 Github 上公開了所有 JS 30 課程的程式碼，有興趣的話可以去 fork 或下載。

本日目標

將陣列元素拿掉冠詞再進行排序，然後個別轉成 HTML 的格式放入清單中。(今天是複習回，相信只要有認真學習前面的課程內容，一定可以輕鬆完成的~)

解析程式碼

HTML 部分

嗯，就是一個空的清單。

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

JS 部分

(ps. 這次基本上都是在複習之前Array的東西，所以就不再贅述Array方法的運用)

我們要拿來做排序的陣列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'];

依照陣列元素的字母順序排列。

const sortedBands = bands.sort((a,b) => {
  if(a > b){
    return 1;
  }else{
    return -1;
  }
});

我們希望去掉冠詞(articles)後再做排序，所以撰寫strip()用來去掉冠詞。

replace(/^(a |the |an )/i, ''): 將陣列元素的冠詞(不分大小寫)以空白取代。

trim() : 去掉字串兩邊的空白。

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

改成去掉冠詞再排序:

const sortedBands = bands.sort(function(a,b){
  if(strip(a) > strip(b)){
    return 1;
  }else{
    return -1;
  }
});

精簡一點的寫法:

const sortedBands = bands.sort((a,b) => {
  return strip(a) > strip(b) ? 1 : -1;
});

將排序過的陣列元素轉換成 HTML 格式放入清單(#bands)作為其中的項目。

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

這個時候打開瀏覽器，我們會發現好像有那裡怪怪的，清單項目之前怎麼有的會有逗號(,)呢?

那是因為我們放進去的是被用toString()先轉型過後的字串，但原本陣列元素之間就有用逗號(,)作為間隔符號，在轉型後雖然去掉[]，但是逗號(,)依然還在，也就這樣被放進去了。

我們可以用老方法join()幫我們先把陣列元素以空白作為間隔符號串聯成字串再放進去#band的innerHTML，這樣逗號就消失啦。

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

今天的內容基本上是在複習之前學過的東西，觀看 JS30 的教學影片時，可以考慮暫停影片，自己練習看看喔!

補充資料:

Array.prototype.sort()
Array.prototype.map()
String.prototype.replace()
String.prototype.trim()
Array.prototype.join()
Template literals

範例網頁請點此