for of 文による繰り返し処理 - JavaScriptでのforeach ループ - JavaScript

JavaScriptのfor of ループの記述を紹介します。

書式

for (var ループ変数 of 配列型の変数){
  ...(処理)
}

「配列型の変数」で指定した配列の個数分ループします。配列の各要素は「ループ変数」に代入されます。配列の各要素に対し１回のループ処理が実行されます。

記述例

pointList配列の個数ループします。pointList配列の要素はpに代入されます。１回目のループではpにはpointList[0]が代入され、 2回目のループではpにpointList[1]が代入されます。以後、配列の末尾の pointList[n] まで順番にループが実行されます。

 for (var p of pointList) {
    //...処理...
  }

プログラム例

コード例

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" language="javascript">
    function onButtonClick() {
      var ItemList=[];
      ItemList.push("ぺんぎんクッキー");
      ItemList.push("らくだキャラメル");
      ItemList.push("しろくまアイス");
      ItemList.push("かるがもサブレ");
      ItemList.push("くじらケーキ");
      ItemList.push("かぴばらタルト");

      var target = document.getElementById("output");
      target.innerHTML = "<ul>";

      
      for (var item of ItemList) {
        target.innerHTML = target.innerHTML + "<li>" + item + "</li> ";
      }
      target.innerHTML = target.innerHTML + "</ul>";
    }
  </script>
</head>
<body>
  <form name="form1" action="">
    <div>ボタンをクリックして下さい</div>
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

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

解説

ボタンのクリックにより、onButtonClick() 関数を実行します。

onButtonClick() 関数の前半は配列を作成しデータを挿入する処理です。pushメソッドを利用して配列に要素を追加しています。

      var ItemList=[];
      ItemList.push("ぺんぎんクッキー");
      ItemList.push("らくだキャラメル");
      ItemList.push("しろくまアイス");
      ItemList.push("かるがもサブレ");
      ItemList.push("くじらケーキ");
      ItemList.push("かぴばらタルト");

id="output" の枠にULタグを出力します。

  var target = document.getElementById("output");
  target.innerHTML = "<ul>";
  /* 中略 */     
  target.innerHTML = target.innerHTML + "</ul>";

ループ部分で、LIタグを出力します。ループは for of 文を利用し、ItemList配列の要素すべてをLIタグで出力しています。

      for (var item of ItemList) {
        target.innerHTML = target.innerHTML + "<li>" + item + "</li> ";
      }

補足

JavaScript部分は以下の書式でも動作します。

  function onButtonClick() {
      var ItemList=[];
      ItemList.push("ぺんぎんクッキー");
      ItemList.push("らくだキャラメル");
      ItemList.push("しろくまアイス");
      ItemList.push("かるがもサブレ");
      ItemList.push("くじらケーキ");
      ItemList.push("かぴばらタルト");

      var target = document.getElementById("output");
      target.innerHTML = "<ul>";
     
      for (var item of ItemList) {
        target.innerHTML += "<li>" + item + "</li> ";
      }
      target.innerHTML += "</ul>";
    }