新手村17 - Sort Without Articles

17 - Sort Without Articles

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

透過 Array.sort() 排序一個Array，但是排序不考慮 “The”、”An”、”A” 這些字眼

  • 功能
    • 排序不考慮 “The”、”An”、”A” 這些字眼
  • 畫面
    • 顯示排序結果

index_START.html

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sort Without Articles</title>
</head>
  <body>
    <style>
      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;
      }

    </style>

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

    <script>
        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'
                      ];
    </script>
    
  </body>
</html>

JS - step by step

首先，先來測試一下陣列的排序吧！其實原本的排序中有分穩定排序與不穩定排序，不過目前 Chrome 瀏覽器的支援度已經達到穩定狀態，因此不管是怎樣的重整都還是會是排序一樣的結果！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    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']
                  ;
                  
    let sortband = bands.sort();
    console.log(sortband);
		
		//["A Skylit Drive", "An Old Dog", "Anywhere But Here", "Counterparts", "Norma Jean", "Oh, Sleeper", "Pierce the Veil", "Say Anything", "The Bled", "The Devil Wears Prada", "The Midway State", "The Plot in You", "We Came as Romans"]

</script>

透過 getElementById 將排序的陣列透過 li 的方式加入 ID bands 之中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    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']
                  ;
                  
    let sortband = bands.sort();
    console.log(sortband);

    document.getElementById("bands").innerHTML = sortband
      .map(band => `<li>${band}</li>`)
      .join("");

</script>

然而，在這次的範例中，原作者的用意不是單純的排序而已，作者希望撇除掉 a、the、an 的排序，因此就會使用到正則運算式來撇除後，再做排序的動作

String.prototype.trim()：https://tinyurl.com/y3cpe564

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
<script>
    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();
    }
    
    let sortband = bands.sort((a,b) => (strip(a) > strip(b) ? 1 : -1));

    // console.log(sortband);

    document.getElementById("bands").innerHTML = sortband
      .map(band => `<li>${band}</li>`)
      .join("");

</script>

就大功告成啦！

JS - final

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
<script>
    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();
    }
    
    let sortband = bands.sort((a,b) => (strip(a) > strip(b) ? 1 : -1));

    // console.log(sortband);

    document.getElementById("bands").innerHTML = sortband
      .map(band => `<li>${band}</li>`)
      .join("");

</script>

本刊同步於個人網站：http://chestertang.site/

本次範例程式碼原作者來源：https://tinyurl.com/yavm5f5n