Yuki's Tech Blog

仕事で得た知見や勉強した技術を書きます。

【TS】任意の回数ループする方法をざっくりまとめてみた

目次

背景

仕事で任意の回数ループしたいときがあって、手こずったので、忘れないようにまとめようと思います。

任意の回数ループする

5回ループしたいとします。まず、Array(5)で要素数が5個の空の配列を作成します。

const keys = Array(5)

console.log(keys); // => [, , , , ]
console.log(keys[0]) // => undefined
console.log(keys.length) // => 5

この配列は要素数が5個あることを表しているだけで、実際に値が存在しているわけではありません。そのため、スプレッド構文で展開してundefinedを要素とする配列にします。

const keys = Array(5)
const array = [...keys];
console.log(array); // => [undefined, undefined, undefined, undefined, undefined] 

最後にforEachを使えば、完成です。5回ループできます。[...Array(5).keys()]を使う方法もありますが、こちらの方が理解しやすいので、こちらを採用しました。

[...Array(5)].forEach((_, i) => {
    console.log(i);
})

(※) ちなみに空の配列に対してforEachを実行する場合、要素が存在しないので、何も実行されずに終了します。エラーが起きたりはしません。

参考記事

JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法 - Qiita

Array.prototype.keys() - JavaScript | MDN