繰り返し処理

2024年01月16日(火) 09時36分更新 icon 項目のみ表示/展開表示の切り替え

for

for(初期化式;条件式;変化式){
  処理
}
　最初に初期化式が1回だけ実行されます。次に条件式が評価され処理に移ります。最後に変化式を実行し再度条件式にジャンプします。
　以下のボタンをクリックするとforにより0～9の数字を表示します。
ボタンを押す前 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id1">ボタンを押す前</span>
  <script type="text/javascript">
  function test1(){
    var o=document.getElementById('id1');
    var t="";
    for(var n=0;n<10;n++)
      t=t+n+" ";
    o.innerText=t;
  }
  </script>
  <form name="test1Form">
    <input type="button" value="for実行" onclick="test1()" />
  </form>
</body>
</html>

for in(オブジェクトに含まれるプロパティを取り出す)

for(変数名 in オブジェクト){
  処理
}
　以下のobj1ボタンをクリックするとidから要素を取得しspan要素にobj1のプロパティ名と値を設定する例を示します。
　id2ボタンをクリックすると同様にid2で示されるオブジェクトのプロパティ名と値を設定します。
ボタンを押す前 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id2">ボタンを押す前</span>
  <script type="text/javascript">
  var obj1={
    name:"名無し",
    old:"年齢不詳"
  }
  function test2(){
    var o=document.getElementById('id2');
    var t="";
    var v;
    for(v in obj1){
      t=t+v+":"+obj1[v]+"<br />";
    }
    o.innerHTML=t;
  }
  function test3(){
    var o=document.getElementById('id2');
    var t="";
    var v;
    for(v in o){
      t=t+v+":"+o[v]+"<br />";
    }
    o.innerHTML=t;
  }
  </script>
  <form name="test2Form">
    <input type="button" value="obj1" onclick="test2()" />
    <input type="button" value="id2" onclick="test3()" />
  </form>
</body>
</html>

forEach(配列の繰り返し処理)

　配列の処理をforEachを使うとすっきり記述できます。 
array.forEach( value,index,array){
   処理内容
});
array:配列 index:現在のインデックス value:現在の配列の値
　取得ボタンをクリックすると配列の値を表示します。
　以下のtest4()とtest5()は同等の処理をします。 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id4"></span>
  <script type="text/javascript">
  function test4(){
    var a=[ 1,2,3,4,5 ];
    var t="";
    for(var n=0;n<a.length;n++){
      t=t+a[n]+" ";
    }
    var o=document.getElementById('id4');
    o.innerText=t;
  }

  function test5(){
    var a=[ 1,2,3,4,5 ];
    var t="";
    a.forEach(function(value){
      t=t+value+" ";
    });
    var o=document.getElementById('id4');
    o.innerText=t;
  }
  </script>
  <form name="test4Form">
    <input type="button" value="forEach実行" onclick="test5()" />
  </form>
</body>
</html>

while

while(条件式){
  処理
}
　条件式が評価され処理に移ります。処理が終わると先頭に戻ります。
　以下のボタンをクリックするとwhileにより0～9の数字を表示します。
ボタンを押す前 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id6">ボタンを押す前</span>
  <script type="text/javascript">
  function test6(){
    var o=document.getElementById('id6');
    var t="";
    var n=0;
    while(n<10)
      t=t+(n++)+" ";
    o.innerText=t;
  }
  </script>
  <form name="test6Form">
    <input type="button" value="while実行" onclick="test6()" />
  </form>
</body>
</html>

do while

do{
  処理内容
}while(条件式)
最初に処理が実行され、次に条件式が評価されtrueの場合は先頭に戻ります。 以下のボタンをクリックするとdo whileにより0～9の数字を表示します。
ボタンを押す前 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id7">ボタンを押す前</span>
  <script type="text/javascript">
  function test7(){
    var o=document.getElementById('id7');
    var t="";
    var n=0;
    do{
      t=t+(n++)+" ";
    }while(n<10);
    o.innerText=t;
  }
  </script>
  <form name="test7Form">
    <input type="button" value="do～while実行" onclick="test7()" />
  </form>
</body>
</html>

break

breakはループ処理を停止してループの次を実行する場合に用います。

continue

continueはループの先頭にジャンプします。