【JavaScript】for 〜 of 文【基本】

for 〜 of文とは繰り返しの一種で、配列の項目数の分 {〜}の処理を実行する。

基本的な書式は↓

for(let 変数名 of 対象となる配列) {
  // 処理内容
}

for に続く()の中がポイントになります。

まず『let 変数名』で繰り返しに使う変数を定義する。

for(let hoge of 〇〇)

定義した変数(hoge)には繰り返しの処理が行われるたびに配列のデータが一つ代入される。

例文を書いてみます。

let fruits = ['りんご', 'みかん', 'ぶどう'];
for(let hoge of fruits) {
  // 処理内容
};

上記の例だと、for に続く()で定義した変数 hoge の中に、繰り返し処理が行われるたびに配列のデータが一つ入ります。

つまり、最初の繰り返しで ‘りんご’、次の繰り返しでは ‘みかん’、と一つずつ変数に代入されます。

そして {〜}内に繰り返し一回分の処理内容を書きます。

配列のデータは定義した変数に代入されているので、これを活用して繰り返しの処理を書きます。

試しに、変数 fruits に代入した果物の配列をコンソールに全部表示させてみます。

See the Pen for of by nkmr (@nkmr_whoo) on CodePen.

デベロッパーツールでコンソールを見ると配列の中の果物が全部並んでいるかと思います。

まとめ

という感じで、今回は『 for … of 文』をご紹介しました。

基本的な 『for 文での繰り返し(ループ)』については別の記事に書きましたので、よかったらそちらもご覧いただけると幸いです↓