JavaScript - 数学 - ベクトル - ラボ: ドット積を用いた投票記録の比較 - ファイルから読み込む(FileReader(onload event, result property), String(split method), Array(slice method, map method, forEach method))

行列プログラマー
原著

開発環境

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

行列プログラマー(Philip N. Klein (著)、 松田 晃一 (翻訳)、 弓林 司 (翻訳)、 脇本 佑紀 (翻訳)、 中田 洋 (翻訳)、 齋藤 大吾 (翻訳)、オライリージャパン)の2章(ベクトル)、2.12(ラボ: ドット積を用いた投票記録の比較)、2.12.2(ファイルから読み込む)、課題 2.12.1 を JavaScript で取り組んでみる。

課題 2.12.1

voting_record_dump109.txt

コード(Emacs)

HTML5

<pre id="output0"></pre>
<input id="file0" type="file">
<br>
<button id="run0">run</button>
<button id="clear0">clear</button>

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

JavaScript

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

let createVotingDict = (strArray) => {
    let d = {};
    strArray.forEach((s) => {
        let a = s.split(/\s+/);

        d[a[0]] = a.slice(3).map((n) => parseInt(n, 10));
    });
    return d;
};

let output = () => {
    let file = input0.files[0],
        reader = new FileReader();

    reader.onload = () => {
        let s = reader.result,
            strArray = s.split('\n'),
            d = createVotingDict(strArray);

        Object.keys(d)
            .forEach((k) => {
                p(`${k}: ${d[k]}`);
            });
    };
    reader.readAsText(file);
};

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