【JavaScript】ループ途中で抜けるサンプルコード

2021年7月12日 2021年7月15日

itechsearchmanager

本記事の内容

やりたいこと
目的
サンプルコード
- 実行画面
コードの解説
おまけ
終わりに

やりたいこと

繰り返し処理を途中で終了し、次の処理を実行する。

イメージは下記の図になります。

イメージ図の説明

イメージ図の①から④について

①for文の処理を行う時に通る道
②for文から抜けた時に通る道
③for文を途中で抜ける時に通る道
④for文の条件式を再度判定する時に通る道

こめつぶ

繰り返し処理を途中でやめたい場合があると思います。
JavaScriptではbreakで繰り返し処理を止めるのが一般的なようです。

目的

繰り返し処理は時間がかかるため、目的の処理が達成できたら、途中で処理を止めたいことがあると思います。

どのプログラムでも途中で繰り返し処理を止めたいことがあるので、JavaScriptでの手法も

学習しておこうと思います。

備忘録としてサンプルコードを載せておこうと思います。

サンプルコード

簡単なサンプルコードを書いてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript" src="test.js">
    </script>
    <input id="Button1" type="button" value="button" onclick="run();" />
</body>
</html>

function run(){
    for (var i = 0; i < 10; i++){
        var num = i * 3;
      
        if (num > 10){
          //処理を抜ける

          alert('num =' + num +'\n処理を抜ける');
          break;
        }
      }
      
      //次の処理
      alert('次の処理');
}

実行画面

こめつぶ

表示されているボタンをクリックすると...

こめつぶ

numの値が12になった時に、処理を抜けます。

こめつぶ

iの値が4なのでループ処理が途中で抜けていることがわかります。

コードの解説

関数宣言を行う。

function run(){ 
  //必要な処理を記載する。
}();

繰り返し行いたい処理をfor文の中に記載する。

  for (var i = 0; i < 10; i++){
    //繰り返し行う処理を記載する。
  }

指定した条件で処理を抜けるようにする。

        var num = i * 3;  //ループ回数に応じて、numの値を3倍にする。
      
        if (num > 10){　　//numの数字が10を超えたら処理を抜ける
          //処理を抜ける

          alert('num =' + num +'\n処理を抜ける');
          break;
        }

デバッグコード

      //次の処理
      alert('i =' + i +'\n次の処理');

おまけ

ループ処理を途中で止めないで、特定の場合のみループの処理を行いたい場合はどうすれば良いか。

フローチャートとコードイメージを下記に示す。

イメージ図の説明

イメージ図の①から⑥について

①for文の処理を行う時に通る道
②for文から抜けた時に通る道
③for文の処理１をスキップする時に通る道
④for文の処理１を行う時に通る道
⑤for文を途中で抜ける時に通る道
⑥for文の条件式を再度判定する時に通る道

例1)5回目まではループ内の処理を行いたくない場合

function run() {
    for (var i = 0; i < 10; i++) {
        //iが5より小さい場合、ループの処理を行わない。
        if (i < 5) {
            continue;
        }
        //iが5回目以降実行される。
        var num = i * 3;

        if (num > 10) {
            //処理を抜ける

            alert('num =' + num + '\n処理を抜ける');
            break;
        }
    }
        //次の処理
        alert('i =' + i + '\n次の処理');
}

実行結果