JavaScript for 循環(huán)
循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。
JavaScript 循環(huán)
如果您希望一遍又一遍地運行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的。
我們可以這樣輸出數(shù)組的值：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
不同類型的循環(huán)
JavaScript 支持不同類型的循環(huán)：
for - 循環(huán)代碼塊一定的次數(shù)
for/in - 循環(huán)遍歷對象的屬性
while - 當指定的條件為 true 時循環(huán)指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環(huán)指定的代碼塊
For 循環(huán)
for 循環(huán)是您在希望創(chuàng)建循環(huán)時常會用到的工具。
下面是 for 循環(huán)的語法：
{
被執(zhí)行的代碼塊
}
語句 1 （代碼塊）開始前執(zhí)行 starts.
語句 2 定義運行循環(huán)（代碼塊）的條件
語句 3 在循環(huán)（代碼塊）已被執(zhí)行之后執(zhí)行
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>點擊按鈕循環(huán)代碼5次。</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "該數(shù)字為 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
從上面的例子中，您可以看到：
Statement 1 在循環(huán)開始之前設置變量 (var i=0)。
Statement 2 定義循環(huán)運行的條件（i 必須小于 5）。
Statement 3 在每次代碼塊已被執(zhí)行后增加一個值 (i++)。
語句 1
通常我們會使用語句 1 初始化循環(huán)中所用的變量 (var i=0)。
語句 1 是可選的，也就是說不使用語句 1 也可以。
您可以在語句 1 中初始化任意（或者多個）值：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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（比如在循環(huán)開始前已經(jīng)設置了值時）：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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，則循環(huán)再次開始，如果返回 false，則循環(huán)將結束。
 | 如果您省略了語句 2，那么必須在循環(huán)內(nèi)提供 break。否則循環(huán)就無法停下來。這樣有可能令瀏覽器崩潰。請在本教程稍后的章節(jié)閱讀有關 break 的內(nèi)容。 |
|---|
語句 3
通常語句 3 會增加初始變量的值。
語句 3 也是可選的。
語句 3 有多種用法。增量可以是負數(shù) (i--)，或者更大 (i=i+15)。
語句 3 也可以省略（比如當循環(huán)內(nèi)部有相應的代碼時）：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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 循環(huán)
JavaScript for/in 語句循環(huán)遍歷對象的屬性：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>點擊下面的按鈕，循環(huán)遍歷對象 "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>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
您將在有關 JavaScript 對象的章節(jié)學到更多有關 for / in 循環(huán)的知識。
While 循環(huán)
我們將在下一章為您講解 while 循環(huán)和 do/while 循環(huán)。