JavaScriptのwhileループ


指定された条件が true である限り、ループはコード ブロックの実行を続行できます。

while ループ

while ループは、指定された条件が true である間、コードのブロックをループします。

構文

while (条件)
{
実行する必要があるコード
}

インスタンス

この例のループは、変数 i が 5 未満である限り実行され続けます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックして、オンライン インスタンスを表示します

lamp 条件で使用される変数の値をインクリメントするのを忘れると、ループは終了しません。これにより、ブラウザがクラッシュする可能性があります。

do/while ループ

do/while ループは while ループのバリエーションです。このループは、条件が true かどうかを確認する前にコード ブロックを 1 回実行し、条件が true の場合はループを繰り返します。

文法

する
{
実行されるコード
}
while (condition);

例

次の例では、do/while ループを使用します。このループは、条件が false の場合でも、少なくとも 1 回実行されます。これは、条件がテストされる前にコード ブロックが実行されるためです。 [例の実行] ボタンをクリックして、オンライン例を表示します

条件で使用される変数の値をインクリメントすることを忘れないでください。そうしないと、ループが終了しません。

for と while の比較
for ループに関する前の章を読んだことがあれば、while ループが for ループと非常に似ていることがわかるでしょう。

この例のループは、

for ループ
を使用して、cars 配列内のすべての値を表示します:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	do{
		x=x + "该数字为 " + i + "<br>";
	    i++;
	}
	while (i<5)  
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

Run Instance» [Run Instance] ボタンをクリックして、オンラインの例

この例のループでは、

while ループ
を使用して、cars 配列内のすべての値を表示します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];){
	document.write(cars[i] + "<br>");
	i++;
}
</script>

</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしますオンラインインスタンスを表示するには

←
→