假設您的任務是寫一個顯示數字 1 到 100 的程式。完成此任務的一種方法是編寫 100 條 console.log() 語句。但我確信你不會，因為你會厭倦第九行或第十行。
每個語句中唯一改變的部分是數字，因此應該有一個方法只寫一個語句。還有循環。循環讓我們在程式碼區塊中重複執行一組步驟。
當某些條件計算為 true 時，While 迴圈會重複執行一組語句。當條件為假時，程式將退出循環。這種循環在執行迭代之前測試條件。迭代是循環體的執行。這是 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，因此執行區塊內的程式碼。這會列印語句“x is now 10”，並將 x 的值減 1。在下次檢查期間，x 等於 9，仍然大於 0。因此循環繼續。在最後一次迭代中，x 最終變為 1，並且我們印出「x is now 1」。之後，x 變成 0，因此我們正在評估的條件不再成立 true。然後，我們開始執行循環外的語句並列印「Out of theloop」。
這是 while 迴圈的一般形式：
while (condition) {
statement;
statement;
etc.
}
使用 while 迴圈時要記住的一件事是不要創造永無止境的迴圈。發生這種情況是因為條件永遠不會變成 false。如果它發生在你身上，你的程式就會崩潰。這是一個例子：
let x = 10;
while(x > 0) {
console.log(`x is now ${x}`);
x += 1;
}
console.log("Out of the loop.");
在本例中，我們增加 x 而不是減少，並且 x 的值已經大於 0，因此循環將無限期地繼續下去。
這個循環體會被執行幾次？
let i = 0;
while (i < 10) {
console.log("Hello, World");
i += 1;
}
do-while 迴圈將先執行語句主體，然後檢查條件。當您知道要至少運行程式碼一次時，這種循環很有用。以下範例會記錄 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 迴圈來產生隨機值，然後只要它們不滿足某些條件就繼續產生它們。這有助於避免由於初始化和循環內重新分配而導致的重複。
這是 do-while 迴圈的一般形式：
do {
statement;
statement;
etc.
} while (condition);
寫一個 do-while 迴圈來顯示數字 1 到 10。
for 迴圈將重複執行程式碼區塊特定次數。以下範例顯示數字 1 到 10：
for (let i = 1; i <= 10; i++) {
console.log(i);
}
這是 for 迴圈的一般形式：
for (initial; condition; step) {
statement;
statement;
etc.
}
Initial 是一個設定變數值的表達式。這是執行初始化的可選表達式。
條件是一個表達式，必須為真才能執行語句。只有當條件計算結果為 true 時才會執行區塊內的語句。完全跳過條件將導致它們始終為真，因此您必須以其他方式退出循環。
step 是一個遞增變數值的運算式。這也是可選的，並且在 for 區塊內的所有語句執行完畢後執行。步驟表達式通常用於接近循環的結束條件。
您也可以將 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 循環，它給出相同的輸出：
let x = 0;
let i = 1;
while(i <= 10) {
x += i;
i += 1;
}
// Outputs: 55
console.log(x);
您應該注意我是如何在 while 區塊的末尾而不是在開頭進行增量的。在開始時增加循環變數 i 會給我們 65，這不是我們在這裡打算做的。
= 運算子是一個賦值運算符，它將值加回變數。這是所有賦值運算子的列表：
| 操作员 | 示例 | 等效 |
|---|---|---|
| += | 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 |
编写一个 for 循环来计算数字的阶乘。数字n的因子是从1到n的所有整数的乘积。例如，4！ （4 阶乘）为 1 x 2 x 3 x 4，等于 24。
数组是一个包含项目列表的对象，这些项目称为元素，可以通过索引进行访问。索引是元素在数组中的位置。第一个元素位于索引 0 处。
数组有一个名为 length 的属性，它为您提供数组中元素的总数。这意味着您可以创建一个 for 循环来迭代数组中的项目，如下所示：
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"]
];
这是循环数组并显示每个元素的方式：
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
*/
您将如何重写上面的循环，以便从末尾开始打印数组元素？
迭代数组时最常见的场景之一是从头开始，然后一次遍历所有元素，直到到达末尾。有一种更短的方法可以将 for 循环编写为 for-of 循环。
for-of 循环让我们可以循环遍历可迭代对象（例如数组、映射和字符串）的值。 for-of 循环基本上用于迭代对象的属性值。这是上一节中的循环，重写为 for-of 循环。
let arr = [1, 2, "Hello", "World"];
for (let item of arr) {
console.log(item);
}
/*
Outputs:
1
2
Hello
World
*/
循环字符串：
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
*/
这种循环让我们可以循环访问对象的属性。对象是一种将键映射到值的数据结构。 JavaScript 中的数组也是对象，因此我们也可以使用 for-in 循环来循环数组属性。我们首先看看如何使用 for-in 循环来迭代对象键或属性。
以下是使用 for-in 循环遍历对象键的示例：
let obj = {
foo: "Hello",
bar: "World"
};
for (let key in obj) {
console.log(key);
}
/*
Outputs:
foo
bar
*/
下面是使用 for-in 循环遍历数组的示例：
let arr = [1, 2, "hello", "world"];
for (let key in arr) {
console.log(arr[key]);
}
/* Outputs:
1
2
hello
world */
我想补充一点，即使我们能够使用 for-in 循环遍历数组元素，您也应该避免这样做。这是因为它的目的是循环访问对象的属性，如果您只想循环数组索引来获取数组值，则在某些情况下可能会得到意外的结果。
循环让我们减少代码中的重复。 While 循环让我们重复一个动作，直到条件为假。 do-while 循环将至少执行一次。 For 循环让我们重复一个动作，直到到达计数结束。 for-in 循环的设计是为了让我们可以访问对象中的键。 for-of 循环的设计是为了让我们能够获取可迭代对象的值。
在下一部分中，您将学习函数。
本文已根据 Monty Shokeen 的贡献进行了更新。 Monty 是一位全栈开发人员，他也喜欢编写教程和学习新的 JavaScript 库。
以上是掌握 JavaScript：第 3 部分，探索循環的詳細內容。更多資訊請關注PHP中文網其他相關文章！
