迴圈可以將程式碼區塊執行指定的次數。
JavaScript 循環
#如果您希望一遍又一遍地運行相同的程式碼，並且每次的值都不同，那麼使用循環是很方便的。
JavaScript 支援不同類型的迴圈：
#For 循環
# for 迴圈是您在希望建立迴圈時常會用到的工具。 下面是for 迴圈的語法：##for (語句1; 語句2; 語句3)
{
執行的程式碼區塊
}
語句1 （程式碼區塊）開始前執行starts.
語句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>執行程式嘗試一下
從上面的範例中，您可以看到：
Statement 1 在迴圈開始之前設定變數(var i=0)。
Statement 2 定義循環運行的條件（i 必須小於 5）。 Statement 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 也可以省略（例如當迴圈內部有對應的程式碼）：
#實例##
<!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 迴圈。
下一節
