C言語風のループ変数を使う書き方

フラグの数値をインクリメントしながらループする方式です。昔はvar を変数宣言に使っていましたが、let が推奨です。let の変数は、このforの条件式とブロックの中だけで有効になります。

for(leti=0;i<5;i++){console.log(i);}

for..in

オブジェクトのプロパティを列挙するループです。プロトタイプまで探索しにいくため、想定外の値がループ変数に代入される可能性があります。そのため、hasOwnProperty() メソッドを呼んで、想定外の値が入らないようにブロックする書き方が一般的でした。今では使うことはないでしょう。次に紹介するfor..of を使うべきです。

for(letkeyinobj){if(obj.hasOwnProperty(key))console.log(key,obj[key]);}}

JavaScript時代との違いは、let で定義された変数の範囲です。そのkey の値も含めて、条件文とボディの中以外から見えることはありません。

for..of

for..in より新しい記法です。イテレータという各データ構造がループ用に持っている機能を使うため、想定外の値が入ることはありません。

for(constvalueofarray){console.log(value);}

of の右側には、イテレータプロトコルをサポートする、次のような要素が書けます。

• 配列、Map 、Set 、文字列

また、それ以外に、イテレータを返すメソッドや関数があり、これらの呼び出しを右辺に持ってくることもできます。

• array.entries() （配列のインデックスと値がセットで返ってくる）

• Object.keys(obj) （オブジェクトのキーが返ってくる）

• Object.values(obj) （オブジェクトの値が返ってくる）

• Object.entries(obj) （オブジェクトのキーと値が返ってくる）

• map.keys() （Map のキーが返ってくる）

• map.values() （Map の値が返ってくる）

• map.entries() （Map のキーと値が返ってくる）

キーと値の両方が返ってくるメソッドは、分割代入を用いて変数に入れます。

for(const[key,value]ofObject.entries(obj)){console.log(key,value);}

なお上記に列挙したものの中では、Object.keys() がES5に入っています。他のものを使うときは、ターゲットバージョンをES2015以上にするか、ターゲットバージョンを低くする代わりにPolyfillを設定する必要があります。

このイテレータは、配列以外にも、配列のような複数の値を含むデータ構造（シーケンス）が共通で備えるインタフェースです。このインタフェースを実装することで、ユーザークラスでもfor..of ループと一緒に使えるようになります。現在はそれほどではないですが、言語標準であるため、何かしらの最適化が行われる可能性があります。

forawaitof

ES2018で導入されました。ループごとに非同期の待ち処理を入れます。これに対応するには、 asyncIterator に対応した要素を条件文の右辺に持ってくる必要がありますが、現在サポートしているのはReadableStream ぐらいしかありません。このクラスは、fetch() のレスポンスのbody プロパティぐらいでしか見かけません。対応するクラスを自作することもできます。

forawait(constbodyofresponse.body){console.log(body);}

並行して処理を投げる場合は、非同期の章で紹介するようにPromise.all() を使い、すべてのリクエストはすべて待たずに投げてしまう方が効率的です。forawaitof は同期的な仕事でのみ利用されることを想定しています。