目录

JavaScript For循环


循环可以多次执行一段代码。


JavaScript 循环

如果您想一遍又一遍地运行相同的代码,并且每次都使用不同的值,则循环非常方便。

使用数组时通常会出现这种情况:

而不是写:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

你可以写:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}
亲自试一试 »

不同类型的循环

JavaScript 支持不同类型的循环:

  • for- 多次循环执行代码块
  • for/in- 循环遍历对象的属性
  • for/of- 循环遍历可迭代对象的值
  • while- 当指定条件为 true 时循环执行代码块
  • do/while- 当指定条件为 true 时,还会循环执行代码块

For 循环

这个for语句创建一个带有 3 个可选表达式的循环:

for ( expression 1; expression 2; expression 3) {
  // code block to be executed
}

表达式1在执行代码块之前执行(一次)。

表达式2定义执行代码块的条件。

表达式3在代码块执行后(每次)执行。

示例

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
亲自试一试 »

从上面的例子中,你可以读到:

表达式 1 在循环开始之前设置一个变量(令 i = 0)。

表达式 2 定义循环运行的条件(i 必须小于 5)。

每次执行循环中的代码块时,表达式 3 都会增加一个值 (i++)。



表达式1

通常,您将使用表达式 1 来初始化循环中使用的变量(令 i = 0)。

这并非总是如此。 JavaScript 不在乎。表达式 1 是可选的。

您可以在表达式 1 中初始化多个值(用逗号分隔):

示例

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
亲自试一试 »

您可以省略表达式 1(就像在循环开始之前设置值一样):

示例

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}
亲自试一试 »

表达式2

表达式 2 通常用于评估初始变量的条件。

这并非总是如此。 JavaScript 不在乎。表达式 2 也是可选的。

如果表达式 2 返回 true,则循环将重新开始。如果返回 false,则循环结束。

如果省略表达式 2,则必须提供休息循环内。否则循环将永远不会结束。这将使您的浏览器崩溃。请阅读本教程后续章节中有关中断的内容。


表达式3

表达式 3 通常会递增初始变量的值。

这并非总是如此。 JavaScript 不在乎。表达式 3 是可选的。

表达式 3 可以执行任何操作,例如负增量 (i--)、正增量 (i = i + 15) 或其他任何操作。

表达式 3 也可以省略(就像在循环内递增值时一样):

示例

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
亲自试一试 »

循环范围

使用var在循环中:

示例

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10
亲自试一试 »

使用let在循环中:

示例

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5
亲自试一试 »

在第一个示例中,使用var,循环内声明的变量在循环外重新声明该变量。

在第二个示例中,使用let,循环内声明的变量不会在循环外重新声明该变量。

什么时候let用于在循环中声明 i 变量,i 变量仅在循环内可见。


For/Of 和 For/In 循环

这个for/in循环和for/of循环将在下一章中解释。


While 循环

这个while循环和do/while将在接下来的章节中进行解释。


通过练习测试一下

练习:

创建一个从 0 到 9 的循环。

let i;
 ( = ;  < ; ) {
  console.log(i);
}

开始练习