ネストしたループから抜ける - JavaScript

JavaScriptでネストしたループを抜けるコードを紹介します。
ネストしたループから抜ける場合はラベルを指定したbreakを用います。

書式

(ラベル名): (ループ処理){
  break (ラベル名):
}

コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script language="javascript" type="text/javascript">
        function onButtonClick() {
            var target = document.getElementById("output");

            loopout: for (i=0; i<10; i++){
                for (j = 0; j < 10; j++) {
                    for (k = 0; k < 5; k++) {
                        target.innerHTML = target.innerHTML + i + "," + j + "," + k +"<br/>";
                        if (j > 2 && k > 2) break loopout;
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form name="form1" action=""> 
    <input type="button" value="Exec" onclick="onButtonClick();" />
    </form>

    <div id="output"></div>
</body>
</html>

解説

以下のコードの部分がループになります。
 loopout: for (i=0; i<10; i++){
   for (j = 0; j < 10; j++) {
     for (k = 0; k < 5; k++) {
       target.innerHTML = target.innerHTML + i + "," + j + "," + k +"<br/>";
       if (j > 2 && k > 2) break loopout;
     }
   }
 }

下記のコードでループの手前にラベルを付与します。
  loopout: for (i=0; i<10; i++){

ループ内の以下のコードで、ループ変数のj,kが2より大きければループ全体を抜けます。
  if (j > 2 && k > 2) break loopout;

実行結果

ページ表示直後の画面です。


Execボタンクリック後の実行結果です。j,kの値が3になったところで3重のループ全体を抜け出ていることがわかります。


著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-09-04
作成日: 2011-06-13
iPentec all rights reserverd.