JavaScript制御フロー

条件分岐
- if文
- switch case文
ループ処理

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;
     }
   }
 }

下記のコードでループの手前にラベルを付与します。