循環讓一塊代碼運行一定的次數:
~~~
for ( var i = 0; i < 5; i++ ) {
// Logs "try 0", "try 1", ..., "try 4".
console.log( "try " + i );
}
~~~
需要注意的是在循環中,變量?`i`?的不僅僅作用于循環代碼塊,即使在變量名前使用了關鍵字?`var`。在[作用域](http://js101.co/javascript-101/scope.html)部分將對作用域進行深入討論。
## `for`?循環
一個?`for`?循環由四個語句組成,并具有以下結構:
~~~
for ( [initialization]; [conditional]; [iteration] ) {
[loopBody]
}
~~~
初始化語句(_initialization_)在循環開始前只執行一次。它是用來準備或聲明任何變量的。
條件語句(_conditional_)在每次迭代之前執行,它會返回一個值用來判斷循環是否繼續。如果條件語句的計算結果為一個假值,則循環停止。
迭代語句(_iteration_)在每次迭代結束時執行,它給你一個機會來改變重要變量的狀態。通常,這將涉及遞增或遞減一個計數器,從而使循環接近結束。
循環體語句(_loopBody_)是每一次循環執行的內容,它可以包含任何東西。通常,會有需要被執行的多行語句,并應包裹在一個代碼塊中(`{...}`)。
一個典型的?`for`?循環:
~~~
for (var i = 0, limit = 100; i < limit; i++) {
// This block will be executed 100 times.
console.log( "Currently at " + i );
// Note: The last log will be "Currently at 99".
}
~~~
## `for...in`?循環
一個?`for...in`?循環遍歷一個對象的屬性,針對每一個屬性,循環體語句可以被執行一次。
~~~
for ( prop in obj ) {
// statements here will be executed for every key in the object
console.log( prop + ': ' + obj[ prop ] );
}
~~~
## `while`?循環
一個?`while`?循環類似于一個?`if`?語句,不同之處在于它的主體部分會繼續執行,直到條件語句計算結果為一個假值。
~~~
while ( [conditional] ) {
[loopBody]
}
~~~
一個典型的?`while`?循環:
~~~
var i = 0;
while ( i < 100 ) {
// This block will be executed 100 times.
console.log( "Currently at " + i );
i++; // Increment i
}
~~~
需要注意的是計數器是在循環的主體部分遞增的。將條件和增量合并也是可行的,像這樣:
~~~
var i = -1;
while ( ++i < 100 ) {
// This block will be executed 100 times.
console.log( "Currently at " + i );
}
~~~
請注意計數器開始于-1,并使用前置增量符(`++i`)。
## `do-while`?循環
這幾乎是與?`while`?循環完全一樣的,不同的是實際上它的循環主體內容在條件測試之前至少會執行一次。
~~~
do {
[loopBody]
} while ( [conditional] )
~~~
一個?`do-while`?循環:
~~~
do {
// Even though the condition evaluates to false
// this loop's body will still execute once.
alert( "Hi there!" );
} while ( false );
~~~
這一類型的循環是少見的,因為只有極少數情況下需要盲目的執行一次循環。無論如何,意識到這一點就好。
## `break`?和?`continue`
通常的,條件語句的計算結果不是一個真值會導致循環的終止,但是也可以通過循環內部的?`break`?語句將循環在其正常運行軌道期終止:
~~~
// Stopping a loop
for ( var i = 0; i < 10; i++ ) {
if ( something ) {
break;
}
}
~~~
你可能還需要繼續循環,但不執行循環主體內的部分內容。這可以通過?`continue`語句做到:
~~~
// Skipping to the next iteration of a loop
for ( var i = 0; i < 10; i++ ) {
if ( something ) {
continue;
}
// The following statement will only be executed
// if the conditional "something" has not been met
console.log( "I have been reached" );
}
~~~