JavaScriptで指定回数分の処理を繰り返す

概要

元の配列がないけど、指定回数分繰り返し処理を行った上で配列を作成する方法を探していました。

結論

個人的に最も簡潔に記述できるのは、Arrayオブジェクトをスプレッド構文で展開して配列を作成し、map(もしくは、forEach)を用いてループする方法だと思います。

[...Array(10)].map(() => console.log('10回実行されます'));

ちなみにArray(ｎ)で生成されるのは空のスロットを持つ配列であり、実際の値(undefinedや空文字を含む)が入ったスロットではない。mapやforEachは空の要素に対しては呼び出しを実行しないため、以下のケースではループ処理が実行されません。

Array(10).map(() => console.log('ループ処理が実行されません'));

const arr = new Array(10);
arr.map(() => console.log('ループ処理が実行されません'));

その他のループ処理方法

// Array(n).fill()
// 記述が短くて良さげ
Array(10).fill().map(() => console.log('10回実行されます'));

// Array.from({ length: n })
// ぱっと見でわかりやすい
Array.from({ length: 10 }).map(() => console.log('10回実行されます'));
Array.from({ length: 10 }, () => console.log('10回実行されます'));

// Array.apply(any, Array(n))
// 古い環境でも使えるのが利点
Array.apply(undefined, Array(10)).map(() => console.log('10回実行されます'));

最後に

個人的にはやはり[...Array(n)].map(fn)を使うのがいいと思います。