Webの勉強はじめてみた その6 ～JavaScript編 ループと配列～

「N予備校のプログラミング入門 Webアプリ」のアーカイブ動画と一緒に勉強を進めています。
今日は第一章の9節と10節を受講しました。

ループ処理

まずはFizzBuzzをfor文で。

for(var i = 1; i <= 100; i+=1){
    if(i % 15 === 0){
        document.write('FizzBuzz ');
    }else if(i % 3 === 0){
        document.write('Fizz ');
    }else if(i % 5 === 0){
        document.write('Buzz ');
    }else{
        document.write(i + ' ');
    }
}

授業では扱わないっぽいので、while と do while を思い出しながらやってみた。
whileって何か応答を待つ間ずっと回す時に使うイメージ。

whileの場合

var i = 1;
while(i <= 100){
    if(i % 15 === 0){
        document.write('FizzBuzz' + ' ');
    }else if(i % 5 === 0){
        document.write('Buzz' + ' ');
    }else if(i % 3 === 0){
        document.write('Fizz' + ' ');
    }else{
        document.write(i + ' ');
    }
    i++;
}

do whileの場合

var i = 1;
do{
    if(i % 15 === 0){
        document.write('FizzBuzz' + ' ');
    }else if(i % 5 === 0){
        document.write('Buzz' + ' ');
    }else if(i % 3 === 0){
        document.write('Fizz' + ' ');
    }else{
        document.write(i + ' ');
    }
    i++;
}while(i <= 100);

配列

配列って書き方がわりとあって混乱する。 JavaScriptの場合は`[]`

for文を使って配列を書き出す

//1年A組～3年D組を書き出すプログラム
let classes=['A組', 'B組', 'C組', 'D組'];
for(var grade =1; grade < 4; grade++){
    for(var i = 0; i < classes.length; i++){
        var rslt = '<p>' + grade + '年' + classes[i] + '<p>'
        document.write(rslt);
    }
}
//あ行とか行を使った
//2文字の名前の組み合わせを書き出すプログラム
let name1 =['あ', 'い', 'う', 'え', 'お','か', 'き', 'く', 'け', 'こ'];
for(var i = 0; i < name1.length; i++){
    for(var x = 0; x < name1.length; x++){
        var rslt = name1[i] + name1[x] + '<br>'
        document.write(rslt);
    }
}

ForEachを使う

配列とえいばforeachだと勝手に思ってます。 でも書き方が覚えにくい。VB.NETはシンプルだったなぁ(遠い目)。

//1年A組～3年D組を書き出すプログラム
let classes =['A組', 'B組', 'C組', 'D組'];
//学年も配列にしてみる
let grade =['1年','2年','3年'];
grade.forEach(gr => {
    classes.forEach(cls => {
        var rslt ='<p>' + gr + cls + '</p>';
        document.write(rslt);
    });
});

//あ行とか行を使った
//2文字の名前の組み合わせを書き出すプログラム
let name1 =['あ', 'い', 'う', 'え', 'お', 'か', 'き', 'く', 'け', 'こ'];
name1.forEach(chars => { 
    name1.forEach(chars2 => {
        var rslt = '<p>' + chars + chars2 +'</p>'
        document.write(rslt);
    });
});

For Of を使う

これは初めて知りました。

//あ行とか行を使った
//2文字の名前の組み合わせを書き出すプログラム
let name1 =['あ', 'い', 'う', 'え', 'お','か', 'き', 'く', 'け', 'こ'];
for(var chr1 of name1){
    for(var chr2 of name1){
        var rslt = '<p>' + chr1 + chr2  + '</p>';
        document.write(rslt);
    }    
}

こっちのほうがわかりやすいかも。
ここを参考にさせてもらいました。

まとめ

ループ処理や配列が絡んでくるといよいよプログラミングって感じがします。 今回授業ではやってなかったんですが、for ofなど、初めて知ることもあったので もっと興味のアンテナを広げたいと思います。