概要
指定回数分の処理を繰り返したいことってありますよね。
for文やwhile文で記述すればいいじゃんという意見もあるかもしれませんが、行数が増えてしまうし、ぱっと見で繰り返し回数がわからないのが難点でした。このような理由で簡潔にループ処理する方法を探していました。
結論
個人的に最も簡潔に記述できるのは、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('ループ処理が実行されません'));
審議
MDN Web Docsではmapを使用すべきではないケースとして、以下のような例が挙げられている。
返された配列を使用しない場合
コールバックから値を返さない場合
返却される新しい配列を使用しない場合でも、配列操作として使い慣れているmapを使いがちだけど、forEachを用いたほうが良いのかもしれません。
その他のループ処理方法
// 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回実行されます'));
最後に
もちろんfor文で頑張るのも選択肢です。個人的にはやはり[...Array(n)].map(fn)を使うのがいいと思います。
↧