JavaScript for ループ
ループは、コードのブロックを指定された回数実行できます。
JavaScript ループ
同じコードを毎回異なる値で何度も実行する場合は、ループを使用すると便利です。
次のように配列の値を出力できます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>実行例»
「インスタンスの実行」ボタンをクリックしてオンライン例を表示します
さまざまなタイプのループ
JavaScript はさまざまなタイプのループをサポートしています:
for - コードブロックを特定の回数ループします
for/in - オブジェクトのプロパティをループします
while - ループ指定された条件が true の場合、指定されたコード ブロック
do/while - 指定された条件が true の場合、指定されたコード ブロックもループします
For ループ
for ループはよく使用するツールですループを作りたいときに使います。
for ループの構文は次のとおりです:
{
実行されたコードブロック
}
ステートメント 1 (コードブロック) は開始前に実行されます
ステートメント 2 ループ (コード ブロック) の実行条件を定義します
ステートメント 3 ループ (コード ブロック) の実行後に実行します
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックして、オンライン インスタンスを表示します
上記の例から、次のことがわかります:
ステートメント 1 は、ループの開始前に変数 (var i=0) を設定します。
ステートメント 2 は、ループが実行される条件を定義します (i は 5 未満である必要があります)。
ステートメント 3 コード ブロックが実行されるたびに値 (i++) をインクリメントします。
ステートメント 1
通常、ステートメント 1 を使用して、ループ内で使用される変数を初期化します (var i=0)。
ステートメント 1 はオプションです。つまり、ステートメント 1 を使用しなくても実行できます。
ステートメント 1 で任意の (または複数の) 値を初期化できます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0,l=cars.length; i<l; i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンライン インスタンスを表示します
次のこともできますステートメント 1 を省略します (たとえば、ループの開始前に値が設定されている場合):
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=2,len=cars.length;
for (; i<len; i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
ステートメント 2
通常、ステートメント 2 は、初期変数の条件を評価するために使用されます。
ステートメント 2 もオプションです。
ステートメント 2 が true を返すとループが再び開始され、false を返すとループが終了します。
 | ステートメント 2 を省略する場合は、ループ内に break を指定する必要があります。そうしないとサイクルを停止できません。これによりブラウザがクラッシュする可能性があります。このチュートリアルの後半で休憩について読んでください。 |
|---|
ステートメント 3
通常、ステートメント 3 は初期変数の値を増やします。
ステートメント 3 もオプションです。
ステートメント 3 には多くの用途があります。増分は負の値 (i--) またはそれより大きい値 (i=i+15) にすることができます。
ステートメント 3 は省略することもできます (たとえば、ループ内に対応するコードがある場合):
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0,len=cars.length;
for (; i<len; ){
document.write(cars[i] + "<br>");
i++;
}
</script>
</body>
</html>Run Instance»
[Run Instance] ボタンをクリックしてオンライン例を表示します
For/In ループ
JavaScript の for/in ステートメントは、オブジェクトのプロパティをループします:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>Run Instance»
オンラインの例を表示するには、[Run Instance] ボタンをクリックします。
JavaScript オブジェクトに関する章で学習します。for / in ループについて詳しく学習します。
while ループ
while ループと do/while ループについては次の章で説明します。
