Webデザイン勉強ブログ

Webデザイン超初学者の勉強用備忘録です。初学者の方の参考にもなればうれしいです!

繰り返し表示させるfor文

for ( let i = 0; i < 3; i++ )

なんかProgateでいきなり出てきたfor文。

配列した値を繰り返し表示させるための構文です。

f:id:lalune_webdedign:20210123170250p:plain

なんじゃこれ・・・という構文ですが定型文のようなもので基本的に変わるのは真ん中の緑の部分だけだそう。

説明なしで「この構文で・・・」と、「いつも書き方(これがテンプレ)で、○○だけ変えればOK!」と教えられるのでは頭に入るスピード違うのは私だけ?

HTMLの時もそうでしたがタグの意味が理解できないとどうしても覚えられないのです。

でもこれがテンプレ!と言われると急に理解できるから不思議ですね。

 

const animals = ["dog""cat""sheep"];
for(let i = 0i < 3i++) {
console.log(animals [i]);
}

これでコンソールでの表示結果がこうなります!

f:id:lalune_webdedign:20210123171419p:plain

 

また、for ( let i = 0; i < 3; i++ ) を for ( let i = 0; i < animals.length; i++ )と記載すると要素数が変わったときに関係なく要素を順番に繰り返してくれます。

 

まとめ

①定数の定義

②for文の記述(わざわざanimals[1]~[3]を記述しなくてよいようにする)

 1.for文で変数 i を定義(テンプレ)

 2.何回繰り返すか指定

 3.どう繰り返すか指定(だいたいテンプレ)

 

参考にした記事

techacademy.jp