Day 17 - Sorting Band Names without articles

前言

JS 30 是由加拿大的全端工程师 Wes Bos 免费提供的 JavaScript 简单应用课程,课程主打 No FrameworksNo CompilersNo LibrariesNo 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()帮我们先把阵列元素以空白作为间隔符号串联成字串再放进去#bandinnerHTML,这样逗号就消失啦。

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

范例网页请点此


<<:  【从零开始的Swift开发心路历程-Day5】简易调色盘Part1

>>:  网路进阶篇

记忆卡随身碟硬碟档案丢失的解决办法

这是一篇有用的工具文。 日常生活中,我们不可避免会碰上误删,误格式化硬碟/外接硬碟/记忆卡亦或是随身...

Day 13 - VLAN 的魔法

作为一个 Home Lab 玩家,我会将 Home Lab 的服务与家庭网路分开,让他们不在同一个 ...

Day22 URLSession 02 - GET

GET:取资料 同样根据以上的Reqres API 来示范 首先一样根据Response 建立Mod...

【Day2】想要在铁人赛完毕前做好的简单 App

APP 点子 我这次铁人赛的目标是在30天内做个游戏化的生活管理 App,可能因为有很多 个 App...

Day 15:AWS是什麽?30天从动漫/影视作品看AWS服务应用 -《云端情人》part 2

前篇提到Samatha的运作原理与可能使用的AWS服务,今天续提她与Theodore在工作使用系统上...