ネスト化されたループ処理中、break・continue文でループ抜ける際に指定したラベルの付いたループを抜けるようにするのに、ラベル文を使用します。ラベル文を使用しない場合は内側のループをまるごと抜けます。

continue文：書き方

ラベル名は任意の名前にでき、break・continue の後に合わせて記述します。

ラベル名 :
for( var i = 0; 条件式 ; i++ ){
	ループ処理;
	for( var i = 0; 条件式 ; i++ ){
		if( 条件式 ){ continue ラベル名; }
		ループ処理;
	}
}

例1）配列 name から値を取り出して #example 内へpタグで書き出す処理と共に、3回のカウントしてその回数を合わせて書き出す

これはラベル文を使わない場合の内側のループの抜ける処理です。

HTML

<div id="example"></div>

JavaScript

var name = ['Aさん','Bさん','Cさん','Dさん','Fさん']
var element = document.getElementById('example');

for(var i in name){
    var newP = document.createElement('p');
    var newText = document.createTextNode('メンバーの名前: '+ name[i]);
    newP.appendChild(newText);
    element.appendChild(newP);
    for(var j=1; j<4 ; j++){
        if( j==2 ){ break ; }
        newTextCnt = document.createTextNode(' ネスト処理'+ j);
        newP.appendChild(newTextCnt);
    }
}

結果

ラベル文を使用しない場合は、内側のループカウントのみが飛ばされています。

例2）配列 name から値を取り出して #example 内へpタグで書き出す処理と共に、3回のカウントしてその回数を合わせて書き出すが、2回のカウントの時点で最初のループを抜ける

ラベル文を使って内側のループから最初のループまで抜けます。

HTML

<div id="example"></div>

JavaScript

var name = ['Aさん','Bさん','Cさん','Dさん','Fさん']
var element = document.getElementById('example');

label:
for(var i in name){
    var newP = document.createElement('p');
    var newText = document.createTextNode('メンバーの名前: '+ name[i]);
    newP.appendChild(newText);
    element.appendChild(newP);
    for(var j=1; j<4 ; j++){
        if( j==2 ){ break label; }
        newTextCnt = document.createTextNode(' ネスト処理'+ j);
        newP.appendChild(newTextCnt);
    }
}

結果

ラベル文を使った場合は、内側のループカウントで条件に当てはまったら最初のループごと抜けるため、Aさんの名前とカウント1まで書き出されたところで処理が終わります。

ループ処理中に特定条件があてはまった場合に、そのループを1回だけ抜けたい時 continue文を使用します。

continue文：書き方

continue文はループ処理の前に条件式などと合わせて記入します。

for( var i = 0; 条件式 ; i++ ){
	if( 条件式 ){ continue; }
	ループ処理;
}

例）配列 name から値を取り出して #example 内へpタグで書き出すが、「Cさん」の書き出しだけしないようにする

HTML

<div id="example"></div>

JavaScript

var name = ['Aさん','Bさん','Cさん','Dさん','Fさん']
var element = document.getElementById('example');
 
for(var i in name){
	if(name[i] == 'Cさん'){ continue; }
    var newP = document.createElement('p');
    var newText = document.createTextNode('メンバーの名前: '+ name[i]);
    newP.appendChild(newText);
    element.appendChild(newP);
    if(name[i] == 'Cさん'){ break; }
}

結果

name の値が「Cさん」と一致した場合にのみループ処理を抜けて書き出さず、その後の人の名前は引き続き書き出されています。

ループ処理中に特定条件があてはまった場合に、そのループを抜けたい時 break文を使用します。

break文：書き方

break文はif文などの条件式と合わせて使用します。

for( var i = 0; 条件式 ; i++ ){
	ループ処理;
	if( 条件式 ){ break; }
}

例）配列 name から値を取り出して #example 内へpタグで書き出すが、「Cさん」を書き出したら処理をやめる

HTML

<div id="example"></div>

JavaScript

var name = ['Aさん','Bさん','Cさん','Dさん','Fさん']
var element = document.getElementById('example');
 
var name = ['Aさん','Bさん','Cさん','Dさん','Fさん']
var element = document.getElementById('example');
 
for(var i in name){
    var newP = document.createElement('p');
    var newText = document.createTextNode('メンバーの名前: '+ name[i]);
    newP.appendChild(newText);
    element.appendChild(newP);
    if(name[i] == 'Cさん'){ break; }
}

結果

書き出した name の値が「Cさん」と一致した場合にループを抜けているので、その後の人の名前は書き出されません。

for…in文では、指定の配列やオブジェクトの要素に対して、先頭からひとつずつ取り出し、それぞれに処理を繰り返し行います。

for…in文：書き方

一回の処理で、配列やオブジェクトから仮の変数に、インデックスやキーが入れられます。それを元に値を取得します。（値そのものが取り出されるわけではありません）

for( 仮の変数（i など）in 配列やオブジェクト ){
	繰り返し行う処理 〜;
} 

例1）配列 name から値を取り出して #example 内へpタグで書き出す

HTML

<div id="example"></div>

JavaScript

var name = ['Aさん','Bさん','Cさん','Dさん','Fさん']
var element = document.getElementById('example');
 
for(var i in name){
    var newP = document.createElement('p');
    var newText = document.createTextNode('メンバーの名前: '+ name[i]);
    newP.appendChild(newText);
    element.appendChild(newP);
}

結果

変数 i に入った配列のインデックスから name の値を取り出して、pタグへ挿入し表示されています。

for文では、あらかじめ決められた回数分だけ処理を繰り返し行います。while文よりもシンプルで高速な処理を行う事ができます。

初期化式で、複数の変数を宣言し、カウンタを複数もつことも可能です。

for：書き方

for( 初期化式（var = 1 など）; 条件式 ; インクリメント or デクリメント ){
	繰り返し行う処理 ;
} 

for文複数のカウンタをもつ場合：書き方

複数のカウンタを作る場合は、カンマで初期化式を増やします。

for( var i = 0 , j = 1 ; 条件式 ; i++ , j++ ){
	繰り返し行う処理 ;
} 

例1）i の値が5以下のあいだ、#example にテキストを挿入する

while文の例と同じ処理を for文で行います。

HTML

<div id="example"></div>

JavaScript

var element = document.getElementById('example');
 
for(var i=0; i<5 ; i++ ){
    var newP = document.createElement('p');
    var newText = document.createTextNode((i+1) + '回目の処理です');
    newP.appendChild(newText);
    element.appendChild(newP);
}

結果

i の値が 0 から始まり 5 以下になるまで（4まで）pタグを作り #example 挿入するので 5 個のpタグが書き出されています。

例2）i の値が5以下のあいだ、#example にテキストを挿入する（”　”回目の部分は別のカウンタで表示する）

HTML

<div id="example"></div>

JavaScript

var element = document.getElementById('example');
 
for(var i=0, j=1 ; i<5 ; i++, j++ ){
    var newP = document.createElement('p');
    var newText = document.createTextNode(j + '回目の処理です');
    newP.appendChild(newText);
    element.appendChild(newP);
}

結果

pに挿入する”　”回目の部分は変数 j を使って表示しています。

do…while文は条件式が当てはまる間、指定された処理を繰り返し行います。while文と違う点は、条件に関係なく最初に一度処理をおこなう点です。

do…while文の処理のながれは、処理→条件式→当てはまる→処理 というながれです。while分の場合は、条件式→当てはまる→処理→条件式 になるので、条件式が当てはまらない場合は一度も処理が行われません。（例2を見て頂くとわかりやすいかもしれません）

do…while文：書き方

do {
	条件式に当てはまる場合の処理〜
} while( 条件式 ) ;

例1）value の値が5以下のあいだ、#example にテキストを挿入する

HTML

<div id="example"></div>

JavaScript

var value = 1; 
var element = document.getElementById('example');

do {
    var newP = document.createElement('p');
    var newText = document.createTextNode(value + '回目の処理です');
    newP.appendChild(newText);
    element.appendChild(newP);
    value++;
} while(value < 0) ;

結果

value の値が 0 から始まり 5 以下になるまで（4まで）pタグを作り #example 挿入するので 5 個のpタグが書き出されています。

例2）value の値が0以下の間は、#example にテキストを挿入する（しかし、value 値は最初から 0 を超えた値になっている）

HTML

<div id="example"></div>

JavaScript

var value = 1; 
var element = document.getElementById('example');

do {
    var newP = document.createElement('p');
    var newText = document.createTextNode(value + '回目の処理です');
    newP.appendChild(newText);
    element.appendChild(newP);
    value++;
} while(value < 0) ;

結果

最初から条件に当てはまりませんが、条件に関係なく一度は処理が行われるので、pが一つ挿入されました。

while文は条件式が当てはまる間、指定された処理を繰り返し行います。インクリメント などと合わせて使い、ある一定の数字に達するまで処理を繰り返し行うことに使用したりします。

while文：書き方

while( 条件式 ){
	条件式に当てはまる場合の処理〜
}

例）value の値が5以下の間、#example にテキストを挿入する

HTML

<div id="example"></div>

JavaScript

var value = 0; 
var element = document.getElementById('example');

while(value < 5){
    var newP = document.createElement('p');
    var newText = document.createTextNode((value+1) + '回目の処理です');
    newP.appendChild(newText);
    element.appendChild(newP);
    value++;
}

結果

value の値が 0 から始まり 5 以下になるまで（4まで）pタグを作り #example に挿入するので 5 個の pタグが書き出されています。