山本ワールド
繰り返し処理
2024年01月16日(火) 09時36分更新
項目のみ表示/展開表示の切り替え

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を使うとすっきり記述できます。
取得ボタンをクリックすると配列の値を表示します。
以下のtest4()とtest5()は同等の処理をします。
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はループの先頭にジャンプします。
Copyright (C) 2012 山本ワールド All Rights Reserved.