JavaScriptにおける繰り返し処理の使い方

2020/11/8 JavaScript


ccc

こんにちわ！


JavaScriptにおける繰り返し処理の使い方を教えてください。


ccc

JavaScriptはクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。


ccc

今回はJavaScriptの使い方として、JavaScriptにおける繰り返し処理の使い方をサンプルを用いて解説します。

for文

for文は指定した回数だけ処理を繰り返します。

for(let i=0; i<=3; i++){
 console.log(i);
}

console.log("end");
//0
//1
//2
//3
//end

実行される順序は次のとおりです。

  • let i=0; //iの初期化
  • i<=5; //式の判定
  • console.log(i); //変数iの値を出力
  • i++; //iをインクリメント

カンマ演算子を使ったfor文

カンマ演算子を使うと複数の変数を初期化して変化させることができます。
for文で実行する文が1つだけのときはブロック{}を省略できます。

for(let i=0, j=0; i<=3; i++, j++){
 console.log(i, j);
}

console.log("end");
//0 0
//1 1
//2 2
//3 3
//end

while文

while文は条件式がtrueの間、処理を繰り返します。

let i=0;

while(i<=3){
 console.log(i);
 i++;
}

console.log("end");
//0
//1
//2
//3
//end

do while文

do while文は条件式がtrueの間、処理を繰り返します。

let i=0;

do{
 console.log(i);
 i++;
}while(i<=3);

console.log("end");
//0
//1
//2
//3
//end

for in文

for in文はオブジェクトのプロパティ名や配列のインデックスを順に取得することができます。

次はオブジェクトのプロパティ名を順に取得するサンプルコードです。変数iには文字列としてプロパティ名が格納されます。

const temp={a:100, b:200, c:300};

for (let i in temp){
 console.log(i + "=" + temp[i]);
}
//a=100
//b=200
//c=300

次は配列のインデックスを順に取得するサンプルコードです。変数iには文字列としてインデックスが格納されます。

const temp=["a", "b", "c"];

for (let i in temp){
 console.log(i + "=" + temp[i]);
}
//0=a
//1=b
//2=c

break文

break文が実行されると、break文が記述されている繰り返し処理を終了します。

for(let i=0; i<=100; i++){
 if(i>3)break;
 console.log(i);
}

console.log("end");
//0
//1
//2
//3
//end

continue文

continue文が実行されると、continue文が記述されている繰り返し処理の残りをスキップし、次の繰り返し処理へ移行します。

for(let i=0; i<=3; i++){
 if(i==0)continue;
 console.log(i);
}

console.log("end");
//1
//2
//3
//end