假設(shè)您的任務(wù)是編寫一個顯示數(shù)字 1 到 100 的程序。完成此任務(wù)的一種方法是編寫 100 條 console.log() 語句。但我確信你不會，因為你會厭倦第九行或第十行。
每個語句中唯一改變的部分是數(shù)字，因此應(yīng)該有一種方法只編寫一個語句。還有循環(huán)。循環(huán)讓我們在代碼塊中重復(fù)執(zhí)行一組步驟。
While 循環(huán)
當(dāng)某些條件計算為 true 時，While 循環(huán)將重復(fù)執(zhí)行一組語句。當(dāng)條件為假時，程序?qū)⑼顺鲅h(huán)。這種循環(huán)在執(zhí)行迭代之前測試條件。迭代是循環(huán)體的執(zhí)行。這是 while 循環(huán)的基本示例：
let x = 10; while(x > 0) { console.log(`x is now ${x}`); x -= 1; } console.log("Out of the loop."); /* Outputs: x is now 10 x is now 9 x is now 8 x is now 7 x is now 6 x is now 5 x is now 4 x is now 3 x is now 2 x is now 1 Out of the loop. */
在上面的示例中，我們首先將 x 設(shè)置為 10。在本例中，條件 x > 0 的計算結(jié)果為 true，因此執(zhí)行塊內(nèi)的代碼。這會打印語句“x is now 10”，并將 x 的值減 1。在下一次檢查期間，x 等于 9，仍然大于 0。因此循環(huán)繼續(xù)。在最后一次迭代中，x 最終變?yōu)?1，并且我們打印“x is now 1”。之后，x 變?yōu)?0，因此我們正在評估的條件不再成立 true。然后，我們開始執(zhí)行循環(huán)外的語句并打印“Out of theloop”。
立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；
這是 while 循環(huán)的一般形式：
while (condition) { statement; statement; etc. }
使用 while 循環(huán)時要記住的一件事是不要創(chuàng)建永無止境的循環(huán)。發(fā)生這種情況是因為條件永遠不會變?yōu)?false。如果它發(fā)生在你身上，你的程序就會崩潰。這是一個例子：
let x = 10; while(x > 0) { console.log(`x is now ${x}`); x += 1; } console.log("Out of the loop.");
在本例中，我們增加 x 而不是減少，并且 x 的值已經(jīng)大于 0，因此循環(huán)將無限期地繼續(xù)下去。
任務(wù)
這個循環(huán)體會被執(zhí)行多少次？
let i = 0; while (i <h2 id="toc-u4gh-do-while-loops">Do-While 循環(huán)</h2> <p>do-while 循環(huán)將首先執(zhí)行語句主體，然后檢查條件。當(dāng)您知道要至少運行代碼一次時，這種循環(huán)很有用。以下示例將記錄 x 的值一次，即使條件計算結(jié)果為 false，因為 x 等于 0。</p> <pre class="brush:JavaScript;toolbal:false;">let x = 0; do { console.log(`x is now ${x}`); x -= 1; } while(x > 0); console.log("Out of the loop."); /* Outputs: x is now 0 Out of the loop. */
我在自己的項目中多次使用 do-while 循環(huán)來生成隨機值，然后只要它們不滿足某些條件就繼續(xù)生成它們。這有助于避免由于初始化和循環(huán)內(nèi)重新分配而導(dǎo)致的重復(fù)。
這是 do-while 循環(huán)的一般形式：
do { statement; statement; etc. } while (condition);
任務(wù)
編寫一個 do-while 循環(huán)來顯示數(shù)字 1 到 10。
For 循環(huán)
for 循環(huán)將重復(fù)執(zhí)行代碼塊特定次數(shù)。以下示例顯示數(shù)字 1 到 10：
for (let i = 1; i <p>這是 for 循環(huán)的一般形式：</p> <pre class="brush:plaintext;toolbal:false;">for (initial; condition; step) { statement; statement; etc. }
Initial 是一個設(shè)置變量值的表達式。這是執(zhí)行初始化的可選表達式。
條件是一個表達式，必須為真才能執(zhí)行語句。僅當(dāng)條件計算結(jié)果為 true 時才會執(zhí)行塊內(nèi)的語句。完全跳過條件將導(dǎo)致它們始終為真，因此您必須以其他方式退出循環(huán)。
step 是一個遞增變量值的表達式。這也是可選的，并且在 for 塊內(nèi)的所有語句執(zhí)行完畢后執(zhí)行。步驟表達式通常用于接近循環(huán)的結(jié)束條件。
您還可以將 for 循環(huán)編寫為等效的 while 循環(huán)。您所需要做的就是稍微改變您的陳述和條件。上面的 for 循環(huán)可以重寫為：
initial; while(condition) { statement; statement; etc. step; }
一種編程模式是使用 for 循環(huán)用變量本身和新值來更新變量的值。此示例將數(shù)字 1 到 10 相加：
let x = 0; for (let i = 1; i <p>這是等效的 while 循環(huán)，它給出相同的輸出：</p> <pre class="brush:javascript;toolbal:false;">let x = 0; let i = 1; while(i <p>您應(yīng)該注意我是如何在 while 塊的末尾而不是在開頭進行增量的。在開始時增加循環(huán)變量 i 會給我們 65，這不是我們在這里打算做的。</p> <p>+= 運算符是一個賦值運算符，它將值添加回變量。這是所有賦值運算符的列表：</p>
| 操作員 | 示例 | 等效 |
|---|---|---|
| += | x += 2 | ?x = x + 2 |
| -= | x -= 2 | x = x – 2 |
| *= | x *= 2 | x = x * 2 |
| /= | x /= 2 | x = x / 2 |
| %= | x%=2 | x = x % 2 |
任務(wù)
編寫一個 for 循環(huán)來計算數(shù)字的階乘。數(shù)字n的因子是從1到n的所有整數(shù)的乘積。例如，4！ （4 階乘）為 1 x 2 x 3 x 4，等于 24。
數(shù)組
數(shù)組是一個包含項目列表的對象，這些項目稱為元素，可以通過索引進行訪問。索引是元素在數(shù)組中的位置。第一個元素位于索引 0 處。
數(shù)組有一個名為 Length 的屬性，它為您提供數(shù)組中元素的總數(shù)。這意味著您可以創(chuàng)建一個 for 循環(huán)來迭代數(shù)組中的項目，如下所示：
let arr = [1, 2, "Hello", "World"]; for (let i = 0; i <p>二維數(shù)組是指元素為數(shù)組的數(shù)組。例如：</p> <pre class="brush:javascript;toolbal:false;">let arr = [ [1, 2], ["Hello", "World"] ];
這是循環(huán)數(shù)組并顯示每個元素的方式：
for (let i = 0; i <p>您將如何重寫上面的循環(huán)，以便從末尾開始打印數(shù)組元素？</p> <h2 id="toc-uxf5-for-of-loop">For-Of 循環(huán)</h2> <p>迭代數(shù)組時最常見的場景之一是從頭開始，然后一次遍歷所有元素，直到到達末尾。有一種更短的方法可以將 for 循環(huán)編寫為 for-of 循??環(huán)。</p> <p>for-of 循??環(huán)讓我們可以循環(huán)遍歷可迭代對象（例如數(shù)組、映射和字符串）的值。 for-of 循??環(huán)基本上用于迭代對象的屬性值。這是上一節(jié)中的循環(huán)，重寫為 for-of 循??環(huán)。</p> <pre class="brush:javascript;toolbal:false;">let arr = [1, 2, "Hello", "World"]; for (let item of arr) { console.log(item); } /* Outputs: 1 2 Hello World */
循環(huán)字符串：
let big_word = "Pulchritudinous"; for (let char of big_word) { console.log(char); } /* Outputs: P u l c h r i t u d i n o u s */
For-In 循環(huán)
這種循環(huán)讓我們可以循環(huán)訪問對象的屬性。對象是一種將鍵映射到值的數(shù)據(jù)結(jié)構(gòu)。 JavaScript 中的數(shù)組也是對象，因此我們也可以使用 for-in 循環(huán)來循環(huán)數(shù)組屬性。我們首先看看如何使用 for-in 循環(huán)來迭代對象鍵或?qū)傩浴?/p>
以下是使用 for-in 循環(huán)遍歷對象鍵的示例：
let obj = { foo: "Hello", bar: "World" }; for (let key in obj) { console.log(key); } /* Outputs: foo bar */
下面是使用 for-in 循環(huán)遍歷數(shù)組的示例：
let arr = [1, 2, "hello", "world"]; for (let key in arr) { console.log(arr[key]); } /* Outputs: 1 2 hello world */
我想補充一點，即使我們能夠使用 for-in 循環(huán)遍歷數(shù)組元素，您也應(yīng)該避免這樣做。這是因為它的目的是循環(huán)訪問對象的屬性，如果您只想循環(huán)數(shù)組索引來獲取數(shù)組值，則在某些情況下可能會得到意外的結(jié)果。
評論
循環(huán)讓我們減少代碼中的重復(fù)。 While 循環(huán)讓我們重復(fù)一個動作，直到條件為假。 do-while 循環(huán)將至少執(zhí)行一次。 For 循環(huán)讓我們重復(fù)一個動作，直到到達計數(shù)結(jié)束。 for-in 循環(huán)的設(shè)計是為了讓我們可以訪問對象中的鍵。 for-of 循??環(huán)的設(shè)計是為了讓我們能夠獲取可迭代對象的值。
在下一部分中，您將學(xué)習(xí)函數(shù)。
本文已根據(jù) Monty Shokeen 的貢獻進行了更新。 Monty 是一位全棧開發(fā)人員，他也喜歡編寫教程和學(xué)習(xí)新的 JavaScript 庫。
