### [掌握 JavaScript：第 3 部分，探索循环](https://www.prosaas.cn/article/7129)

**Published:** 2023-08-28T14:37:09

**Author:** 5201314

**Excerpt:** 假设您的任务是编写一个显示数字 1 到 100 的程序。完成此任务的一种方法是编写 100 条 语句。但我确信…

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212125741430.jpg)

假设您的任务是编写一个显示数字 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 部分，探索循环的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** console, for, JavaScript, Length, while, 字符串, 对象, 循环, 数据结构, 栈

**Categories:** WordPress

---