[JavaScript30] 🗃 17. Sort Without Articles

16352 ワード
JavaScript javascript30 テキストリンク

🗃 17. Sort Without Articles


配列の内容から副詞(a,the,an)を削除し,アルファベット順に並べ替える.
イニシャルコード
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
初期画面

🌏 プロセス


👉 1.ソート

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

上記のコードを減らします.
①3つの演算子を使用します.
const sortedBands = bands.sort((a,b)=>{
    return strip(a) > strip(b) ? 1 : -1;
})
② ES6 Arrow function
const sortedBands = bands.sort((a,b) => strip(a) > strip(b) ? 1 : -1);

👉 2.浮動小数点を除去する関数を作成する

function strip(bandName){
    return bandName.replace(/^(a |the |an )/i, '').trim();
}
a、the、anがある場合は''に変更し、trimにカットします.

👉 3.ドキュメントへのマッピング

document.querySelector('#bands').innerHTML = sortedBands
    .map(band => `<li>${band}</li>`)
    .join('');
idがbandのタグ内にmap()内の内容を入れる.
マークアップされた構文をクリア
[TIL]航海9935日目