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 文での繰り返し（ループ）』については別の記事に書きましたので、よかったらそちらもご覧いただけると幸いです↓
