猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

JavaScriptのbreak文の使い方

(いきなり余談: ずぅーーーーーーっと狙っていたけどずぅーーーーーーっと無かったローソンの鶏むねの梅大葉巻きが昨日立ち寄ったローソンで発見!迷わず買って食べたけどまあまあのおいしさ!笑 でか焼鳥っていうからも少し大きなのを想像していたけど、そうでもなかった!という感想(笑)
 はい、おわり。笑)


(さて)
PHP勉強してたときもbreak文とかあったな…と思いながらも
今日はJSでのbreak文とcontinue文の使い方を書いていく!

>>>break

break文とは、なにかの繰り返しの処理(ってことはfor文使ってるね)をしている時に、「ここで止めたいな~」「この数字のときになったらループから抜け出したいな~」ってときに使う処理。

ただ「break;」って書けばいい話なのだが、PHPのbreak文の書き方も忘れかけているので改めてメモ的に記しておきますお。

前回のfor文を参考にして書いてみる。
前回のコードを持ってこよう。
東京オリンピックまでの年号が平成だったら…

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ループ練習</title>
</head>

</html>

<body>
  <table>
    <tr>
      <th colspan="2">もしも東京オリンピックまで平成だったら</th>
    </tr>
    <tr>
      <th>平成</th>
      <th>西暦</th>
    </tr>
    <script>
      // もし東京オリンピックまでの年号が平成だったら
      for (var i = 1; i <= 32; i = i + 1) {
        document.write('<tr><td>' + i + '</td>' + '<td>' + (i + 1988) + '</th></td>');
      }
    </script>
  </table>
</body>

…というかんじのループ処理のうち、
ためしに現在の平成30年でループから抜けてみる。
日本語では、「もし~だったら抜ける」となるので、
ループ処理のfor文の中で、「もし」というif文を書く。
(伸びてしまうのでbodyで区切るよ)

<body>
  <table>
    <tr>
      <th colspan="2">もしも東京オリンピックまで平成だったら</th>
    </tr>
    <tr>
      <th>平成</th>
      <th>西暦</th>
    </tr>
    <script>
      // 平成30年でループを止める
      for (var i = 1; i <= 32; i = i + 1) {
        if (i == 31) {
          break;
        }
        document.write('<tr><td>' + i + '</td>' + '<td>' + (i + 1988) + '</th></td>');
      }
    </script>
  </table>
</body>

30年で止めるからif文の条件文に「30」と書いてしまいそうだが、そう書いてしまうと、29年で止まってしまうのである。

だから止めたい数字+1と覚えてしまうのも✋かも。

次に

>>>continue

continue文とは、繰り返し処理の先頭に戻り、再度繰り返し処理を行う命令である。

ではさきほどのループ処理プログラムを用いて、
4の倍数の処理をせず、また繰り返しの先頭に戻る、という処理にしてみる。

<body>
  <table>
    <tr>
      <th colspan="2">もしも東京オリンピックまで平成だったら</th>
    </tr>
    <tr>
      <th>平成</th>
      <th>西暦</th>
    </tr>
    <script>
      // 4の倍数を表示させない!
      for (var i = 1; i <= 32; i = i + 1) {
        if (i % 4 == 0) {
          continue;
        }
        // if (i % 4 == 0) continue; ←でもOK
        document.write('<tr><td>' + i + '</td>' + '<td>' + (i + 1988) + '</th></td>');
      }
    </script>
  </table>
</body>

すると、オリンピックの年が表示されなくなる(笑)
しかし、きちんと4の倍数はなくなっているのが確認でける。

f:id:msm20-chocolateee:20180829174902p:plain

筆者的(自分に対しての)注意点は、
・if文の条件式のときに「=」を2つ書いて等号すること
・break文の条件式の数字に気を付ける
VSCodeで自動修正されるが、コードの階層に気を付ける
ですかねー。