はじめに

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

TL;DR

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

目次

  1. はじめに
  2. TL;DR
  3. 詳細
    1. スプレッド構文を使う
    2. Array.fill を使う
    3. Array.from を使う
  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 (xxxx は forEach とか 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.fill を使う

スプレッド構文わかりにくいとか、使いにくいとか言う人向けの別のやり方1。

Array.fill を使う。

1
Array(10).fill().forEach((_, i) => console.log('hello'));

Array(10).fill() の戻り値は以下。

1
2
Array(10).fill();
// => [undefined, ..., undefined ]

Array.from を使う

スプレッド構文わかりにくいとか、使いにくいとか言う人向けの別のやり方2。

Array.from を使う。

1
Array.from({ length: 10 }).forEach((_, i) => console.log('hello'));

Array.from({ length: 10 }) の戻り値も Array(10).fill() と同じく undefined の配列。

1
2
Array.from({ length: 10 });
// => [undefined, ..., undefined ]

まとめ

その他・メモ

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

参考文献

関連記事

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