JavaScript - Advanced Iteration: Looping Like Crazy(map method, filter method, split method, join method)

Head First Python

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Node.js, Safari(JavaScript エンジン)
• Learning JavaScript [邦訳] (参考書籍)

Head First Python (Paul Barry (著)、O'Reilly Media)のChapter 13.(Advanced Iteration: Looping Like Crazy) の SHARPEN YOUR PENCIL(No. 9129) を JavaScript で取り組んでみる。

SHARPEN YOUR PENCIL(No. 9129)

コード(Emacs)

HTML5

<button id="run0">run</button>
<button id="clear0">clear</button>
<pre id="output0"></pre>

<script src="sample2.js"></script>

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0'),
    p = (x) => pre0.textContent += x + '\n';

let output = () => {
    let data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    p('1.');
    p(data);
    
    let evens = data.filter((num) => num % 2 === 0);
    p(evens);

    p('2.');
    data = [1, 'one', 2, 'two', 3, 'three', 4, 'four'];
    p(data);

    let words = data.filter((num) => typeof num === 'string');
    p(words);
    
    p('3.');
    data = 'So long and thanks for all the fish'.split(/\s/);
    p(data);
    let title = data.map((word) => {
        let chars = word.split('');
        
        return chars[0].toUpperCase() + chars.slice(1).join('').toLowerCase();
    });
    p(title);
};

btn0.onclick = output;
btn1.onclick = () => pre0.textContent = '';

output();