JavaScript/for...of
for...of
編集for...of は、JavaScript において配列や他の反復可能なオブジェクト(iterable)を反復処理するための制御文です。この構文を使用すると、オブジェクト内の各要素の値を順に取得することができます。
構文
編集for (variable of iterable) { // 実行するコード }
各部分の説明:
使用例
編集配列の要素を反復
編集// 配列を反復 const numbers = [1, 2, 3, 4, 5]; for (const num of numbers) { console.log(num); // 1, 2, 3, 4, 5 が順に出力される }
この例では、配列 numbers の各要素が num に代入され、順に出力されます。
文字列の文字を反復
編集// 文字列を反復 const message = "Hello"; for (const char of message) { console.log(char); // H, e, l, l, o が順に出力される }
この例では、文字列 message の各文字を反復処理しています。
// Map を反復 const map = new Map([ ['name', 'Alice'], ['age', 30] ]); for (const [key, value] of map) { console.log(`${key}: ${value}`); }
この例では、Map
のキーと値のペアを取得しています。
// Set を反復 const set = new Set([1, 2, 3]); for (const value of set) { console.log(value); // 1, 2, 3 が順に出力される }
この例では、Set
の要素を順に取得しています。
注意点
編集for...in
との違い:for...of
は配列のインデックスではなく、値そのものを反復します。一方、for...in
はプロパティ名(インデックス)を列挙します。- 反復可能であることが必要:
for...of
は反復可能なオブジェクト(Symbol.iterator
を持つオブジェクト)にのみ使用できます。 - ブラウザ互換性: 古いブラウザではサポートされていない場合があるため、必要に応じてトランスパイラ(例: Babel)を使用してください。