繰り返し処理

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はループの先頭にジャンプします。