ループは、コードのブロックを指定された回数実行できます。
JavaScript ループ
同じコードを毎回異なる値で何度も実行する場合は、ループを使用すると便利です。
JavaScript は、さまざまなタイプのループをサポートします:
for - コード ブロックを特定の回数ループします
for/in - オブジェクトのプロパティをループします
while - いつループしますか指定された条件が true 指定されたコード ブロック
do/while - 指定された条件が true の場合にも、指定されたコード ブロックをループします
For ループ
for ループは、次のような場合によく使用されます。のループツールを作成します。
以下は for ループの構文です:
for (ステートメント 1; ステートメント 2; ステートメント 3)
{
実行されたコード ブロック
}
ステートメント 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>Run試してみるプログラム
から 上の例では、次のことがわかります:
ステートメント 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=["小明","小龙","小奇","小涛"];
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>プログラムを実行して試してください
For/In ループ
JavaScript for/in ステートメントはオブジェクトのプロパティをループします:
例
<!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>プログラムを実行して試してください
while ループと do/while ループについては次で説明します。章。
次のセクション