【JavaScript】for-of文 / 配列 - 繰り返し処理（配列の繰り返し）

JavaScriptのfor-of文をご紹介します。

for-of文

for-of文は配列から値を１つずつ取り出す繰り返し処理です。
for文でも同様の処理を実現できますが、配列の値の数だけ繰り返したい場合は、for-of文が適しています。

基本構文

for( const 変数 of 配列 ) {
    // 処理.......
}

処理順序

for-of文の処理の順序は次のようになります。

1. 配列から値を取り出す（値がない場合は４へ）
2. ブロック処理
3. １へ
4. 終了

サンプル

let data = [ "a", "b", "c" ];

for( const value of data ) {
    console.log(value);
}

a
b
c

for-of文の繰り返しごとに、変数dataの先頭から値を１つ取り出して処理を行ないます。

for文とfor-of文の違い

for-of文で実現できることは、for文でも実現できます。
ただし、配列から値を取り出す繰り返し処理はfor-of文の方がコードの簡潔性とバグ要因を抑えられる点で優れています。

次のサンプルコードで比較して見てみましょう。

for文

let fruits = [ 'Apple', 'Orange', 'Grape', 'Melon' ];

for( let i = 0; i < fruits.length; i++ ) {
    console.log(fruits[i]);
}

Apple
Orange
Grape
Melon

for-of文

let fruits = [ 'Apple', 'Orange', 'Grape', 'Melon' ];

for( const fruit of fruits ) {
    console.log(fruit);
}

Apple
Orange
Grape
Melon

いずれも同じ処理を目的としたコードですが、for文の繰り返し制御よりもfor-of文の方が簡潔です。