1、什么是循環(huán)

網(wǎng)站建設(shè)過程中循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。

如果您希望一遍又一遍地運行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的。

我們可以這樣輸出數(shù)組的值：

一般寫法：

使用for循環(huán)

是不是立馬變得簡潔又方便了呢

2、JavaScript 支持不同類型的循環(huán)

for - 循環(huán)代碼塊一定的次數(shù)

for/in - 循環(huán)遍歷對象的屬性

while - 當指定的條件為 true 時循環(huán)指定的代碼塊

do/while - 同樣當指定的條件為 true 時循環(huán)指定的代碼塊

2.1、For 循環(huán)

for 循環(huán)是您在希望創(chuàng)建循環(huán)時常會用到的工具。

下面是 for 循環(huán)的語法：

語句 1（代碼塊）開始前執(zhí)行

語句 2定義運行循環(huán)（代碼塊）的條件

語句 3在循環(huán)（代碼塊）已被執(zhí)行之后執(zhí)行

實例

從上面的例子中，您可以看到：

Statement 1 在循環(huán)開始之前設(shè)置變量 (var i=0)。

Statement 2 定義循環(huán)運行的條件（i 必須小于 5）。

Statement 3 在每次代碼塊已被執(zhí)行后增加一個值 (i++)。

語句1

通常我們會使用語句 1 初始化循環(huán)中所用的變量 (var i=0)。

語句 1 是可選的，也就是說不使用語句 1 也可以。

您可以在語句 1 中初始化任意（或者多個）值：

實例:

同時您還可以省略語句 1（比如在循環(huán)開始前已經(jīng)設(shè)置了值時）：

實例:

語句 2

通常語句 2 用于評估初始變量的條件。

語句 2 同樣是可選的。

如果語句 2 返回 true，則循環(huán)再次開始，如果返回 false，則循環(huán)將結(jié)束。

如果您省略了語句 2，那么必須在循環(huán)內(nèi)提供break。否則循環(huán)就無法停下來。這樣有可能令瀏覽器崩潰。請在本教程稍后的章節(jié)閱讀有關(guān) break 的內(nèi)容。

語句 3

通常語句 3 會增加初始變量的值。

語句 3 也是可選的。

語句 3 有多種用法。增量可以是負數(shù) (i--)，或者更大 (i=i+15)。

語句 3 也可以省略（比如當循環(huán)內(nèi)部有相應(yīng)的代碼時）：

實例:

2.2、For/In 循環(huán)

JavaScript for/in 語句循環(huán)遍歷對象的屬性：

實例

2.3、while 循環(huán)

• 只要指定條件為 true，循環(huán)就可以一直執(zhí)行代碼塊。

• while 循環(huán)會在指定條件為真時循環(huán)執(zhí)行代碼塊。

語法

實例

本例中的循環(huán)將繼續(xù)運行，只要變量 i 小于 5：

如果您忘記增加條件中所用變量的值，該循環(huán)永遠不會結(jié)束。這可能導(dǎo)致瀏覽器崩潰。

2.4、do/while 循環(huán)

do/while 循環(huán)是 while 循環(huán)的變體。該循環(huán)會在檢查條件是否為真之前執(zhí)行一次代碼塊，然后如果條件為真的話，就會重復(fù)這個循環(huán)。

語法

實例

下面的例子使用 do/while 循環(huán)。該循環(huán)至少會執(zhí)行一次，即使條件為 false 它也會執(zhí)行一次，因為代碼塊會在條件被測試前執(zhí)行：

實例

別忘記增加條件中所用變量的值，否則循環(huán)永遠不會結(jié)束！

2.5、比較 for 和 while

你會發(fā)現(xiàn) while 循環(huán)與 for 循環(huán)很像。

本例中的循環(huán)使用for 循環(huán)來顯示 cars 數(shù)組中的所有值：

實例

網(wǎng)站設(shè)計在本例中的循環(huán)使用while 循環(huán)來顯示 cars 數(shù)組中的所有值：

實例