掌握 JavaScript：第 3 部分，探索循環

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

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

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

While 迴圈

當某些條件計算為 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 迴圈

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 迴圈

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-Of 循环

迭代数组时最常见的场景之一是从头开始，然后一次遍历所有元素，直到到达末尾。有一种更短的方法可以将 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
*/

For-In 循环

这种循环让我们可以循环访问对象的属性。对象是一种将键映射到值的数据结构。 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中文網其他相關文章！