for文を使わないでやってみた

29600 ワード
JavaScript for array JavaScript テキストリンク

はじめに

for文は色々な言語で用意されており、様々なところで使われています。
実際、同じ処理を複数回するときに便利です。
また、for文が使われていれば、容易に繰り返し同じことをしていると分かります。
簡単であり、可読性が高いという点で、for文は優れていると思います。

しかし、それは処理という面で捉えるからです。
オブジェクトという面で見たときは、拡張for文の登場によって扱えるとは言え、優れているとは言えないでしょう。
JavaScriptにはちゃんと Array というビルドインオブジェクトが用意されているので、それを使って繰り返す処理を書くことも選択肢に入れましょう。

という訳で、今回はfor文からArrayを使った書き方に移行する方法を紹介していきたいと思います。

指定回数繰り返す

10回ログに出力します。

// for文
for(let i=0; i<10; i++) {
    console.log('repeat:', i);
}


// Array
[...Array(10)].forEach((_, i) => {
    console.log('repeat:', i);
});

[...Array(10)] のようにすることで、固定長の配列を作成することができます。

ここで使っているのは、 Array.prototype.forEach() です。
与えられた配列の中身を順番に実行して、新しく配列を生成する必要の無い場合は、これを使うことができます。

指定範囲の配列を作成する

1から10までの2つおきの配列を作成します。

// for文
const vFor = [];
for(let i=1; i<=10; i+=2) {
    vFor.push(i);
}
console.log(vFor); // [ 1, 3, 5, 7, 9 ]


// Array
const range = (start: number, stop: number, step: number) => {
    return Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
}
const vArray = range(1, 10, 2);
console.log(vArray); // [ 1, 3, 5, 7, 9 ]

ここで使っているのは、 Array.from() です。
新しく配列を生成したいときに使うことができます。

配列の値それぞれを加工する

5人の国語・数学・英語・理科・社会の5教科の合計得点を計算します。

const scores = [
    { '国語': 85, '数学': 78, '英語': 92, '理科': 62, '社会': 69 },
    { '国語': 23, '数学': 44, '英語': 78, '理科': 44, '社会': 50 },
    { '国語': 86, '数学': 10, '英語': 56, '理科': 82, '社会': 90 },
    { '国語': 31, '数学': 42, '英語': 96, '理科': 49, '社会': 68 },
    { '国語': 70, '数学': 55, '英語': 48, '理科': 89, '社会': 11 },
];

// for文
const vFor = [];
for(const score of scores) {
    vFor.push(score.国語 + score.数学 + score.英語 + score.理科 + score.社会);
}
console.log(vFor); // [ 386, 239, 324, 286, 273 ]


// Array
const vArray = scores.map((score) => {
    return score.国語 + score.数学 + score.英語 + score.理科 + score.社会;
});
console.log(vArray); // [ 386, 239, 324, 286, 273 ]

ここで使っているのは、 Array.prototype.map() です。
Array.prototype.forEach と異なり、与えられた配列の中身を順番に実行して、新しく配列を作成したい場合に、これを使うことができます。

配列の値をまたがって加工して1つの値を作成する

教科ごとの合計得点を計算します。

const scores = [
    { '国語': 85, '数学': 78, '英語': 92, '理科': 62, '社会': 69 },
    { '国語': 23, '数学': 44, '英語': 78, '理科': 44, '社会': 50 },
    { '国語': 86, '数学': 10, '英語': 56, '理科': 82, '社会': 90 },
    { '国語': 31, '数学': 42, '英語': 96, '理科': 49, '社会': 68 },
    { '国語': 70, '数学': 55, '英語': 48, '理科': 89, '社会': 11 },
];

// for文
const vFor = { '国語': 0, '数学': 0, '英語': 0, '理科': 0, '社会': 0 };
for(const score of scores) {
    vFor.国語 += score.国語;
    vFor.数学 += score.数学;
    vFor.英語 += score.英語;
    vFor.理科 += score.理科;
    vFor.社会 += score.社会;
}
console.log(vFor); // { '国語': 295, '数学': 229, '英語': 370, '理科': 326, '社会': 288 }


// Array
const vArray = scores.reduce((previous, score) => {
    return {
        '国語': previous.国語 + score.国語,
        '数学': previous.数学 + score.数学,
        '英語': previous.英語 + score.英語,
        '理科': previous.理科 + score.理科,
        '社会': previous.社会 + score.社会,
    };
}, { '国語': 0, '数学': 0, '英語': 0, '理科': 0, '社会': 0 });
console.log(vArray); // { '国語': 295, '数学': 229, '英語': 370, '理科': 326, '社会': 288 }

ここで使っているのは、 [Array.prototype.reduce()] です。(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) です。
与えられた配列の中身を順番に実行して、1つの値を作成したい場合に、これを使うことができます。

データを基に並列処理を行う

Yahoo! Japan と Google へリクエスト送信を並列処理で行います。

import fetch from 'node-fetch';

const urls = [
    'https://www.yahoo.co.jp/',
    'https://www.google.com/',
];

// for文
(async () => {
    const promises = [];
    for(const url of urls) {
        promises.push((async () => {
            const response = await fetch(url);
            return await response.text();
        })());
    }
    console.log(await Promise.all(promises));
})();


// Array
(async () => {
    console.log(
        await Promise.all(
            urls.map(async (url) => {
                const response = await fetch(url);
                return await response.text();
            })
        )
    );
})();

リクエストの送信には、 node-fetchを使用しています。
Array側の方が階層は深くなってしまっていますが、書いている内容はシンプルです。
内容としては、 Array.prototype.map() を使って、 Promise が返る配列を作成し、それを Promise.all に渡しています。

（番外編）for...in

教科の一覧を表示します。

const score = { '国語': 86, '数学': 10, '英語': 56, '理科': 82, '社会': 90 };

// for文
for(const key in score) {
    console.log(key);
}


// Array
Object.keys(score).forEach((key) => {
    console.log(key);
});

for...in の書き換えには、 Object.keys() を併用します。
keyの一覧を配列として取得してからは、 Array.prototype.forEach() でも Array.prototype.map() でも Array.prototype.reduce() でも使用することができます。

おわりに

for文とArrayを使った書き方は、どちらがお好みでしょうか？
試しに作っているコードを、for文からArrayへ、Arrayからfor文へ書き直してみてください。

PC-lint
Webrtcのnative api二次開発の環境構築