概要

JavaScriptで配列をループで処理する方法をまとめる。

環境

> node -v
v10.15.3

汎用性が高い。記述量は多め。

const x = ['a', 'b', 'c']
for (let i = 0; i < x.length; i++) {
    console.log(`${i} : ${x[i]}`)
}

0 : a
1 : b
2 : c

値にしか興味がない場合。（n番目という情報は不要な場合）

const x = ['a', 'b', 'c']
x.forEach(v => console.log(v))

a
b
c

次の点に気をつける。

例外を throw する以外の方法で、forEach() ループを止めることはできません。ループ中に中断することがある場合、forEach() メソッドは適切な方法ではありません。

こういう場合は、forかfor...ofを使おう。

配列の値が返される。forEachとよく似ている。

const x = ['a', 'b', 'c']
for (let v of x) {
    console.log(v)
}

a
b
c

配列の要素にアクセス可能な値が返される。
ただし、下記のような注意点があるため、forやforEachを使うのが良さそう。

for...in はインデックスの順序が重要となる配列の繰り返しには使うぺきではありません。

const x = ['a', 'b', 'c']
for (let i in x) {
    console.log(`${i} : ${x[i]}`)
}

0 : a
1 : b
2 : c

stringが返るのが不思議な感じ。

const x = ['a', 'b', 'c']
for (let i in x) {
    console.log(`${i} : ${typeof i}`)
}

0 : string
1 : string
2 : string

配列のインデックスと値がどちらも必要 => for
値だけ必要 => forEach もしくは、for...of