Quantcast
Channel: 配列タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 757

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

$
0
0
概要 指定回数分の処理を繰り返したいことってありますよね。 for文やwhile文で記述すればいいじゃんという意見もあるかもしれませんが、行数が増えてしまうし、ぱっと見で繰り返し回数がわからないのが難点でした。このような理由で簡潔にループ処理する方法を探していました。 結論 個人的に最も簡潔に記述できるのは、Arrayオブジェクトをスプレッド構文で展開して配列を作成し、map(もしくは、forEach)を用いてループする方法だと思います。 [...Array(10)].map(() => console.log('10回実行されます')); ちなみにArray(n)で生成されるのは空のスロットを持つ配列であり、実際の値(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)を使うのがいいと思います。

Viewing all articles
Browse latest Browse all 757

Trending Articles