Chapter2-3の「JavaScriptの制御構文」で for文 に触れましたが、
ES2015からはよりシンプルに書くことができるfor…of文を使えるようになりました。
構文は以下の通りで、宣言した変数の中には配列の要素が代入され、配列の先頭の要素から最後の要素まで繰り返されます。
for (変数名 of 配列) {
// 繰り返す処理
}
以下のサンプルコードでfor…of文を試してみましょう。
配列の要素がvalue変数に代入されることが確認できます。
function for_of_1() {
const values = ['A', 'B', 'C'];
for (const value of values) {
console.log(value);
}
}
A
B
C
for…of文は原則最後の要素まで繰り返し処理を行いますが、
break文で繰り返し処理を抜けることができます。
function for_of_2() {
const values = ['A', 'B', 'C'];
for (const value of values) {
console.log(value);
break;
}
}
A
for…of文とよく似た構文でfor…in文があります。
for…of文と同じく、配列の先頭の要素から最後の要素まで繰り返されますが、
宣言した変数にはインデックス番号が代入されます。
for (変数名 in 配列) {
// 繰り返す処理
}
以下のサンプルコードで宣言した変数にインデックス番号が代入されていることを確認してみましょう。
function for_in_1() {
const values = ['A', 'B', 'C'];
for (const index in values) {
console.log(index);
console.log(values[index]);
console.log('---');
}
}
0
A
---
1
B
---
2
C
---
また、配列ではなく連想配列を指定すると、宣言した変数にはキー（オブジェクトのプロパティ名）が代入されます。
function for_in_2() {
const account = {
id: 1,
name: 'Taro',
age: 20
}
for (const property in account) {
console.log(property);
console.log(account[property]);
console.log('---');
}
}
id
1
---
name
Taro
---
age
20
---