JS30 day17 Sorting Band Names

Posted by Anthony Chao on 2019-11-16

JS30 day17 - Sorting Band Names

作業內容

今天內容頗簡單的,只是要把某陣列排序之後塞到 DOM node 裡面而已,反而是花很多時間在查 JS 的方法XD
可以看看這個CodePen

學到什麼

  • JS

    1. replace()裡面第一個參數可以放字串或者 regular expression,但要記得如果放字串他只會替換一次,如果是 regular expression 後面只要放個 g 就是 global,可以替換全部的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    name = 'Word Word';

    uw=name.replace(/Word/g, "QQ")
    console.log(uw) // "QQ QQ"

    uw=name.replace(/Word/, "QQ")
    console.log(uw) // "QQ Word"

    uw=name.replace("Word", "QQ")
    console.log(uw) // "QQ Word"

    除此之外,第二個參數也可以放 function,比方說今天要把某段字串的第一個都換成大寫

    1
    2
    3
    4
    name = 'aaa bbb ccc';
    uw=name.replace(/\b\w+\b/g, function(word){
    return word.substring(0,1).toUpperCase()+word.substring(1);
    });

    參考資料:https://www.opencli.com/php/javascript-search-and-replace
    參考資料2:https://www.w3school.com.cn/jsref/jsref_replace.asp

    1. substr() / substring() / slice() 的差異:
      如果都只有一個參數,他會代表起始值的 index,這時候沒差異
    1
    2
    3
    4
    5
    var NewStr="Welcome to wibibi.";

    console.log(NewStr.substr(3)); // "come to wibibi."
    console.log(NewStr.substring(3)); //"come to wibibi."
    console.log(NewStr.slice(3)); //"come to wibibi."

    但是如果有兩個參數的話, substr()的第二個參數代表長度,substring()slice() 的第二個參數代表結束的 index (不包含)

    1
    2
    3
    4
    5
    6
    var NewStr="Welcome to wibibi.";
    // 如果算長度的話,從 3 的 index (c) 算 6 位是到 "t" 結束
    // 如果算 index 的話,是到 'e' 結束 (不包含)
    console.log(NewStr.substr(3, 6)); // "come t"
    console.log(NewStr.substring(3, 6)); //"com"
    console.log(NewStr.slice(3, 6)); //"com"

    另外,ECMAscript並沒有將substr()納入標準,因此不建議使用

    那麼 substring() / slice() 的差異在哪呢??

    答案是 substring() 支援往前取值,但 slice() 不行

    1
    2
    3
    4
    var NewStr="Welcome to wibibi.";

    console.log(NewStr.substring(3, 1)); //"el"
    console.log(NewStr.slice(3, 1)); // ""

    參考資料:
    https://www.wibibi.com/info.php?tid=315
    https://www.foolegg.com/what-is-the-difference-between-substr-substring-and-slice-in-javascript/

    1. trim() 是可以回傳某段字串去除掉前後空白字元的值
    1
    2
    3
    var NewStr="  Welcome to wibibi.  ";

    console.log(NewStr.trim()); // "Welcome to wibibi."

參考資料:
https://github.com/wesbos/JavaScript30

code 內容:

HTML:

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body {
margin: 0;
font-family: sans-serif;
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
background-size: cover;
display: flex;
align-items: center;
min-height: 100vh;
}

#bands {
list-style: inside square;
font-size: 20px;
background: white;
width: 500px;
margin: auto;
padding: 0;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
}

#bands li {
border-bottom: 1px solid #efefef;
padding: 20px;
}

#bands li:last-child {
border-bottom: 0;
}

a {
color: #ffc600;
text-decoration: none;
}

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 container = document.querySelector('#bands')

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 lists = sortedBands.map(function(band){
return `
<li>${band}</li>
`
}).join("")
container.innerHTML = lists




prevent_hack