---
title: "IT课程 JavaScript基础 042_循环 while、for"
date: 2024-12-28T12:01:08.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "JavaScript条件分支", "JavaScript条件分支语句", "条件分支语句", "条件分支", "循环", "JavaScript 循环", "JavaScript while", "JavaScript for"]
categories: ["学习", "JavaScript基础"]
canonical: https://www.zhaojian.net/it-course-javascript-042/
author: 赵健
---

循环语句是用于重复执行一段代码块的方法，JavaScript 提供了 `while`、`do-while`、`for` 等不同类型的循环语句。
一个完整的循环体包括：初始化表达式、循环条件和迭代器。

### `while` 循环

`while` 循环用于在条件为 `true` 的情况下，重复执行一段代码。
循环体的单次执行叫作 **一次迭代**。
任何表达式或变量都可以是循环条件，循环条件会被计算，结果会转化为布尔值。
与 `if` 类似，如果循环体只有一条语句，也可以省略大括号 `{…}`，但不推荐这样。
每次迭代之前都要检查条件。

示例：

```js
let i = 0; // 初始化表达式，通常用于声明计数器变量，没有会报错 undefined
while (i < 5) { // 循环条件，为 `true`，循环将一直执行
	console.log(i);
	i++; // 迭代器，通常用于更新计数器变量，匹配循环条件
}
```

死循环示例：

```js
let i = 0;
	while (1) { // 条件始终为 true 会进入死循环
    console.log(i);
    i++; // 通常适用此形式的计数器更新循环条件
    if (i >= 5) break;  // 注释掉即进入死循环模式
}
```

***

### `do-while` 循环

`do-while` 循环与 `while` 循环类似，但它先执行一次循环体，然后检查条件是否为 `true`，如果条件为真时，则继续执行循环体。
需要注意使用场景，只有在不管条件是否为真，都要 **至少执行一次** 循环体时，才使用 `do-while`，其它场景推荐 `while` 循环。
每次迭代后都要检查条件。

示例：

```js
let i = 0;
do {
	console.log(i);
	i++;
} while (i < 5);
```

***

### `for` 循环

`for` 循环是一种更加复杂，但也最常适用的循环结构，用于重复执行一段代码。
`for` 循环包含三个部分：初始化表达式、循环条件和迭代器。以下是 `for` 循环的基本语法：
每次迭代之前都要检查条件，可以使用其他设置。

示例：

```js
for (let i = 0; i < 5; i++) {
	console.log(i);
}
```

死循环示例：

```js
let i = 0;
	for ( ; ; ) { // 省略所有条件时，会进入死循环
    console.log(i);
    i++; // 通常适用此形式的计数器更新循环条件
	if (i >= 5) break;  // 注释掉即进入死循环模式
}
```

##### 省略语句段

`for` 循环可以省略初始化表达式、循环条件或迭代器中的任意一个或多个，但分号 `;` 必须保留。分号用于分隔各个部分，省略其中一个部分时仍需要保留相应的分号。

示例：

```js
let x = 0;
for (; x < 5; x++) {
	console.log(x);
}
// 省略初始化表达式，将其移到循环外部，循环仍然有效

let y = 0;
for (;; y++) {
	if (y >= 5) {
		break;
	}
	console.log(y);
}
// 省略循环条件，通过 `if` 语句和 `break` 来终止循环

let z = 0;
for (; z < 5;) {
	console.log(z);
	z++;
}
// 省略迭代器，迭代器被移到循环体内，循环仍然有效
```

***

### 循环嵌套

嵌套循环是指在一个循环体内包含另一个完整的循环结构。嵌套循环在每次执行外部循环时，同时执行一次内部循环。

正三角示例：

```js
// 示例 A
for (let i = 1; i <= 5; i++) { // 外部循环，控制行数，从 1 到 5。
  let row = ''; // 每次执行外部循环时，创建一个空字符串 `row`，用于存储当前行的星号。
  for (let j = 1; j <= i; j++) { // 内部循环，控制每行的星号数量，从 1 到当前行数 `i`。
    row += '⭐ '; // 将星号追加到 `row` 中，形成当前行的星号字符串。
  }
  console.log(row); // 输出当前行的星号字符串。
}
```

```js
// 示例 B
for (let i = 1; i <= 5; i++) { // 外循环表示行数
    for (let j = 1; j <= i; j++) { // 内循环表示列
        document.write('⭐'); // 使用星号作为图形元素
    }
    document.write('</br>'); // 换行
}
```

倒三角示例：

```js
// 示例 A
for (let i = 5; i >= 1; i--) { // 外部循环，控制行数，从 1 到 5。
  let row = ''; // 每次执行外部循环时，创建一个空字符串 `row`，用于存储当前行的星号。
  for (let j = 1; j <= i; j++) { // 内部循环，控制每行的星号数量，从 1 到当前行数 `i`。
    row += '* ';  // 将星号追加到 `row` 中，形成当前行的星号字符串。
  }
  console.log(row);  // 输出当前行的星号字符串。
}
```

```js
// 示例 B
for (let i = 1; i <= 5; i++) { // 外循环表示行数
    for (let j = 0; j <= 5 - i; j++) { // 内循环表示列
        document.write('⭐'); // 使用星号作为图形元素
    }
    document.write('</br>'); // 换行
}
```

***

### `break` 终止（结束、跳出）循环

`break` 用于终止（结束、跳出）当前的循环或 `switch` 语句，如果没有 `break`，则会继续执行后续 `case`（即发生“穿透”现象）。

"无限循环 + `break`" 的组合适用于不必在循环开始/结束时检查条件，但需要在中间甚至是主体的多个位置进行条件检查的情况。

示例：

```js
let count = 0;
while (true) {
	console.log("循环中...");
	// 模拟某个条件，当满足时跳出循环
	if (count === 5) {
		console.log("满足条件，跳出循环");
		break;
	}
	count++;
}
```

***

### `continue` 继续下一次（跳过）循环

`continue` 用于在循环中提前结束当前迭代，并继续下一次迭代。
`continue` 是 `break` 的 “轻量版”，它不会停掉整个循环。而是停止当前这一次迭代，并强制启动新一轮循环（如果条件允许的话）。

示例：

```js
for (let i = 0; i < 8; i++) {
    if (i % 2 === 0) {
        continue; // 当 i 取余为 2 时跳过当前迭代，继续下一次迭代
    }
    console.log(i);
}
```