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>";
 }

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];

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

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

不同类型的循环

JavaScript 支持不同类型的循环:

  • for - 多次循环执行代码块

  • for/in - 循环访问对象的属性

  • for/of - 循环遍历 an 的值 可迭代对象

  • while - 当指定条件为 true 时循环执行代码块

  • do/while - 当指定条件为真时也循环遍历代码块


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>";
}
 

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
let text = "";

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

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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

表达式 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>";
 }

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";

for (; i < len; i++) {
  text += cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

表达式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++;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let len = cars.length;
let text = "";

for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

循环范围

在循环中使用 var

例子

var i = 5;

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

// Here i is 10

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p id="demo"></p>

<script>
var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

在循环中使用 let

例子

let i = 5;

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

// Here i is 5

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p id="demo"></p>

<script>
let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

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

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

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


For/OfFor/In 循环

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


while 循环

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