假設您的任務是寫一個顯示數字 1 到 100 的程式。完成此任務的一種方法是編寫 100 條 console.log() 語句。但我確信你不會，因為你會厭倦第九行或第十行。

每個語句中唯一改變的部分是數字，因此應該有一個方法只寫一個語句。還有循環(huán)。循環(huán)讓我們在程式碼區(qū)塊中重複執(zhí)行一組步驟。

• While 迴圈
• #Do-While 迴圈
• For 迴圈
#
• 陣列
• For-Of 迴圈
• For-In 迴圈
#

While 迴圈

當某些條件計算為 true 時，While 迴圈會重複執(zhí)行一組語句。當條件為假時，程式將退出循環(huán)。這種循環(huán)在執(zhí)行迭代之前測試條件。迭代是循環(huán)體的執(zhí)行。這是 while 迴圈的基本範例：

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 設定為 10。在本例中，條件 x > 0 的計算結果為 true，因此執(zhí)行區(qū)塊內的程式碼。這會列印語句“x is now 10”，並將 x 的值減 1。在下次檢查期間，x 等於 9，仍然大於 0。因此循環(huán)繼續(xù)。在最後一次迭代中，x 最終變?yōu)?1，並且我們印出「x is now 1」。之後，x 變成 0，因此我們正在評估的條件不再成立 true。然後，我們開始執(zhí)行循環(huán)外的語句並列印「Out of theloop」。

這是 while 迴圈的一般形式：

while (condition) {
    statement;
    statement;
    etc.
}

使用 while 迴圈時要記住的一件事是不要創(chuàng)造永無止境的迴圈。發(fā)生這種情況是因為條件永遠不會變成 false。如果它發(fā)生在你身上，你的程式就會崩潰。這是一個例子：

let x = 10;

while(x > 0) {
   console.log(`x is now ${x}`);
   x += 1;
}

console.log("Out of the loop.");

在本例中，我們增加 x 而不是減少，並且 x 的值已經大於 0，因此循環(huán)將無限期地繼續(xù)下去。

任務

這個循環(huán)體會被執(zhí)行幾次？

let i = 0;

while (i < 10) {
    console.log("Hello, World");
    i += 1;
}

Do-While 迴圈

do-while 迴圈將先執(zhí)行語句主體，然後檢查條件。當您知道要至少運行程式碼一次時，這種循環(huán)很有用。以下範例會記錄 x 的值一次，即使條件計算結果為 false，因為 x 等於 0。

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 迴圈來產生隨機值，然後只要它們不滿足某些條件就繼續(xù)產生它們。這有助於避免由於初始化和循環(huán)內重新分配而導致的重複。

這是 do-while 迴圈的一般形式：

do {
    statement;
    statement;
    etc.
} while (condition);

任務

寫一個 do-while 迴圈來顯示數字 1 到 10。

For 迴圈

for 迴圈將重複執(zhí)行程式碼區(qū)塊特定次數。以下範例顯示數字 1 到 10：

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

這是 for 迴圈的一般形式：

for (initial; condition; step) {
    statement;
    statement;
    etc.
}

Initial 是一個設定變數值的表達式。這是執(zhí)行初始化的可選表達式。

條件是一個表達式，必須為真才能執(zhí)行語句。只有當條件計算結果為 true 時才會執(zhí)行區(qū)塊內的語句。完全跳過條件將導致它們始終為真，因此您必須以其他方式退出循環(huán)。

step 是一個遞增變數值的運算式。這也是可選的，並且在 for 區(qū)塊內的所有語句執(zhí)行完畢後執(zhí)行。步驟表達式通常用於接近循環(huán)的結束條件。

您也可以將 for 迴圈編寫為等效的 while 迴圈。您所需要做的就是稍微改變您的陳述和條件。上面的 for 迴圈可以改寫為：

initial;

while(condition) {
    statement;
    statement;
    etc.
    step;
}

一種程式模式是使用 for 迴圈以變數本身和新值來更新變數的值。此範例將數字 1 到 10 相加：

let x = 0;

for (let i = 1; i <= 10; i++) {
    x += i;
}

// Outputs: 55
console.log(x);

這是等效的 while 循環(huán)，它給出相同的輸出：

let x = 0;
let i = 1;

while(i <= 10) {
  x += i;
  i += 1;
}

// Outputs: 55
console.log(x);

您應該注意我是如何在 while 區(qū)塊的末尾而不是在開頭進行增量的。在開始時增加循環(huán)變數 i 會給我們 65，這不是我們在這裡打算做的。

= 運算子是一個賦值運算符，它將值加回變數。這是所有賦值運算子的列表：

任務

編寫一個 for 循環(huán)來計算數字的階乘。數字n的因子是從1到n的所有整數的乘積。例如，4！ （4 階乘）為 1 x 2 x 3 x 4，等于 24。

數組

數組是一個包含項目列表的對象，這些項目稱為元素，可以通過索引進行訪問。索引是元素在數組中的位置。第一個元素位于索引 0 處。

數組有一個名為 length 的屬性，它為您提供數組中元素的總數。這意味著您可以創(chuàng)建一個 for 循環(huán)來迭代數組中的項目，如下所示：

let arr = [1, 2, "Hello", "World"];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

/*
Outputs:
1
2
Hello
World
*/

二維數組是指元素為數組的數組。例如：

let arr = [
    [1, 2],
    ["Hello", "World"]
];

這是循環(huán)數組并顯示每個元素的方式：

for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr[i].length; j++) {
        console.log(arr[ i ][ j ]);
    }
}

/*
Outputs:
1
2
Hello
World
*/

您將如何重寫上面的循環(huán)，以便從末尾開始打印數組元素？

For-Of 循環(huán)

迭代數組時最常見的場景之一是從頭開始，然后一次遍歷所有元素，直到到達末尾。有一種更短的方法可以將 for 循環(huán)編寫為 for-of 循??環(huán)。

for-of 循??環(huán)讓我們可以循環(huán)遍歷可迭代對象（例如數組、映射和字符串）的值。 for-of 循??環(huán)基本上用于迭代對象的屬性值。這是上一節(jié)中的循環(huán)，重寫為 for-of 循??環(huán)。

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)訪問對象的屬性。對象是一種將鍵映射到值的數據結構。 JavaScript 中的數組也是對象，因此我們也可以使用 for-in 循環(huán)來循環(huán)數組屬性。我們首先看看如何使用 for-in 循環(huán)來迭代對象鍵或屬性。

以下是使用 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)遍歷數組的示例：

let arr = [1, 2, "hello", "world"];

for (let key in arr) {
    console.log(arr[key]);
}

/* Outputs:
1
2
hello
world */

我想補充一點，即使我們能夠使用 for-in 循環(huán)遍歷數組元素，您也應該避免這樣做。這是因為它的目的是循環(huán)訪問對象的屬性，如果您只想循環(huán)數組索引來獲取數組值，則在某些情況下可能會得到意外的結果。

評論

循環(huán)讓我們減少代碼中的重復。 While 循環(huán)讓我們重復一個動作，直到條件為假。 do-while 循環(huán)將至少執(zhí)行一次。 For 循環(huán)讓我們重復一個動作，直到到達計數結束。 for-in 循環(huán)的設計是為了讓我們可以訪問對象中的鍵。 for-of 循??環(huán)的設計是為了讓我們能夠獲取可迭代對象的值。

在下一部分中，您將學習函數。

本文已根據 Monty Shokeen 的貢獻進行了更新。 Monty 是一位全棧開發(fā)人員，他也喜歡編寫教程和學習新的 JavaScript 庫。

以上是掌握 JavaScript：第 3 部分，探索循環(huán)的詳細內容。更多資訊請關注PHP中文網其他相關文章！