ｎ回など、指定回数だけ処理を繰り返す場合にfor文を使うが、これを非破壊で記述する具体的な方法について。
##目次
- for文の場合
- for文を使わない場合
-
何をしてるか？
4. 変数（res）
5. [...Array(n)]
6. 配列.map((_, i) => {処理} - 繰り返すのみの処理（インデックス番号不要の場合）
- 参考リンク
##for文の場合 一般的なfor文の場合、以下のように`i < n`と`i++`で処理回数を指定する。
for文の例
n = 5
for(i=0; i < n; i++){
console.log("処理：" + i)
}
出力
処理：0
処理：1
処理：2
処理：3
処理：4
##for文を使わない場合 上記の処理をfor文を使わず非破壊処理で記述するには以下を使う。
・変数 = [...Array(n).map()]
スプレッド構文、Array, mapメソッドを使用する。
非破壊処理の記述例
n = 5
const res = [...Array(n)].map((_, i) =>
console.log("処理：" + i)
)
こちらも全く同じ結果が得られる。
出力
処理：0
処理：1
処理：2
処理：3
処理：4
##何をしてるか？
res = [...Array(n)].map((_, i) => {処理}
###1. 変数（res）
処理結果を代入する変数。何でもいい。
...配列のように、スプレッド構文で配列を展開する場合、別の変数に代入する必要がある。
[...Array(n)]だけの場合エラーになる。
エラー
Uncaught SyntaxError: Unexpected token '...'
###2. [...Array(n)] これが核となる処理。
####2-1. Array( )
Array( )は新しいArrayオブジェクトを作成する処理。カッコの中にある値を[ ]で囲む処理となる。
####2-2. Array(整数) Array( )の引数に整数を渡した場合、指定した数の**空の要素**が入った配列を作る。
※undefinedやnullではなく、完全に空(empty)となる。
空の配列の例
console.log(Array(5))
//出力
[empty × 5]
例えば、整数に５を指定すると、emptyが5回繰り返される。
この状態ではmapメソッドを使っても要素を取り出すことはできない。
次の処理で、emptyをundefinedに変換する。
####2-3. [...Array(整数)] スプレッド構文と[ ]を使うことで、**空（empty）をundefinedに変換**することができる。
まずは、スプレッド構文を使い、[empty × 5]のカッコを外す。この時点で、要素にundefinedが入る。
emptyをundefinedに置き換える
console.log(...Array(5))
//出力
undefined undefined undefined undefined undefined
この処理に[ ]を付ければ、指定した数だけundefinedが入った配列が出来上がる。
配列にする
console.log([...Array(5)])
//出力
[undefined undefined undefined undefined undefined]
###3. 配列.map((_, i) => {処理} mapで配列の要素を一つづつ取り出し、**要素の数だけ処理を繰り返す**。
.map(要素用の変数, インデックス番号用の変数)
要素undefinedはどうでもいいので、明示的に「 _ 」とする
今回の処理はインデックス番号を使うので、第２引数でインデックス番号を格納する変数を用意する。（例ではiを使用）
これで指定回数分だけ処理を繰り返すことができる。
##繰り返すのみの処理（インデックス番号不要の場合） 実行する処理でインデックス番号が不要の場合はもっとシンプルに書ける。
インデックス番号を使わない場合
const res = [...Array(n)].map( _ =>
console.log("処理")
)
##参考リンク for文を使わない方法は、今回使用した`[...Array].map()`以外にも再起処理を使うなどいくつかあります。