はじめに

Ruby の 5.times のように、JavaScript で簡単に指定回数(N回)のループを行う方法を調べた。

TL;DR

  • [...Array(5)].xxxx を使う
    • [...Array(5)].forEach
    • [...Array(5)].map
    • etc
  • スプレッド構文(...)は IE 非対応なので注意 (2020/01/10 現在)
この記事が参考になった方
ここここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 詳細
  4. まとめ
  5. その他・メモ
  6. 参考文献

詳細

N 回ループして forEach やら map やらを使いたいことがあったので調べた。
(下記のように for 分使えば実現できるんだけど、もっと楽がしたかった)

1
2
3
4
let ary = [];
for (let i=0; i<10; i++) {
ary.push(i);
}

JavaScriptで指定したN回分ループする - Qiita に書かれている通り。

[...Array(5)].xxxx (xxxxforEach とか map とか) を用いると、比較的簡単に N 回ループを実現できる。

1
2
3
4
5
[...Array(10)].forEach(() => console.log('hello'));
// => 'hello' が 10 回出力される

[...Array(10)].map(() => 'hello');
// => ['hello', 'hello', ..., 'hello']

forEach などの第一引数には何も入っていない(undefined)ため、インデックスを利用したい場合には第二引数を使う。
forEach に標準で用意されている引数。

1
2
3
4
5
6
7
// NG
[...Array(10)].forEach((i) => console.log(i));
// => undefined が 10 回出力される

// OK
[...Array(10)].forEach((_, i) => console.log(i));
// => 0〜9 が出力される

まとめ

  • [...Array(5)].xxxx を使う
    • [...Array(5)].forEach
    • [...Array(5)].map
    • etc
  • スプレッド構文(...)は IE 非対応なので注意 (2020/01/10 現在)

その他・メモ

スプレッド構文についての詳しいことは、下記を見ると良さそう。

参考文献

関連記事

この記事が参考になった方
ここここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list