本文是JavaScript基础教程中的第五章，在这一章中，我们将学习如何使用循环来编写令人惊叹的高效代码。
for 循环
你知道什么是循环吗？ 想象一下在一个十字路口：当南北向行驶车辆通行时，东西向行驶的车辆会停止。 接着，交通信号发生变化，提醒南北向的车辆停止，让东西向的车辆通行。
对于信号灯来说，它的变化会按照可预测的模式 (即循环模式) 一遍遍地不断运行。
在编程中，我们也经常需要重复做一些事情。比如，我们想要在网页上显示从1到10的数字，我们也许会这么写：
document.write(1);
document.write(2);
document.write(3);
document.write(4);
document.write(5);
document.write(6);
document.write(7);
document.write(8);
document.write(9);
document.write(10);
这样写虽然可以实现需求，但很麻烦，也很容易出错。如果我们想要显示从1到100的数字呢？难道要写100行代码吗？ 或者如果我们想要改变所有显示的数字或者样式呢？难不成要一行行改吗？😅这也太麻烦了吧！
好在，JavaScript有一个很好的解决办法，就是for循环 😍。 for循环可以让我们多次重复执行一段代码，却不需要想上面那样写大量代码。for循环的语法格式如下：
for (初始化; 条件; 递增) {
// 循环体
}
相关的解释如下：
初始化：这里可以定义一个变量，并给它一个初始值。这个变量通常叫做循环变量，它用来记录循环的次数或者状态。
条件：这里可以写一个表达式，用来判断是否继续执行循环。只要表达式的结果为真（true），就会继续执行循环； 如果表达式的结果为假（false），就会停止执行循环。
递增：这里可以写一个语句，用来改变循环变量的值。通常是让循环变量增加或者减少一定的数值。
循环体：这里可以写一段代码（即一段命令），用来实现我们想要重复做的事情。这段代码会在每次循环时执行一次。
下面是一个简单的for循环的例子：
// 用for循环显示从1到10的数字
for (var i = 1; i <= 10; i++) {
document.write(i + "<br>");
}
在上面的例子中，我们首先定义了一个循环变量 i，并给它赋值为1。这表示我们从1开始循环。接着我们写了一个条件 i <= 10。这表示只要 i 小于等于10，就继续循环；
如果 i 大于10，就停止循环。然后我们还写了一个 i++。这表示每次循环后，让 i 的值增加1。
在循环体中，我们写了一行代码 document.write(i + "<br>")。这使得每次循环时，网页上都会显示 i 的值，并换行。
但仅仅知道它们的作用还不够，我们还需要知道for循环的执行过程。当我们运行这段代码时，会发生以下过程：
明显看出，初始化表达式只会在第一次进入循环之前执行一次。而条件表达式则会在每次循环开始前执行一次，递增的语句会在每次循环结束后执行一次。
在这个例子中，当i的值由于 i++ 的重复执行而变为11时，条件 i <= 10 不再满足，循环就停止了。
你看，用for循环就可以很方便地重复执行一段代码多次，而不需要写很多行相同或者类似的代码。真的是太方便了😊！
为了便于理解，你可以把 for 循环想象成一个小朋友在玩跳房子游戏。 他从第一个方格开始跳，然后跳到第二个方格，再跳到第三个方格...直到跳到最后一个方格（比如第十个）为止。 他每跳一次，就会数一下自己跳了几次。
当然，for循环不仅可以用来显示数字，还可以用来做很多有趣的事情。比如，我们可以用for循环来画一个正方形，或者一个五角星，或者一个笑脸。 我们还可以用for循环来计算一些数学题，比如阶乘、斐波那契数列、素数。 甚至，我们可以用for循环来实现一些游戏的逻辑，比如猜数字，或者石头剪刀布，或者井字棋。 你要做的只是探寻逻辑中的循环模式，然后用for循环来实现它！
while 循环
你已经知道了什么是for循环，它可以让我们重复执行一段代码，直到一个条件不满足为止。但是，有时候我们并不知道要重复执行多少次， 而是要根据某个条件来决定是否继续循环。这时候，我们就可以用while循环 😎。
while循环的意思是“当...的时候”，它可以让我们在某个条件为真（true）的时候，不断地执行一段代码；当条件为假（false）的时候，就停止执行循环。 while循环的语法格式如下：
while (条件) {
// 循环体
}
相关的解释如下：
条件：这里可以写一个表达式，用来判断是否继续执行循环。只要表达式的结果为真（true），就会继续执行循环； 如果表达式的结果为假（false），就会停止执行循环。
循环体：这里可以写一段代码（即一段命令），用来实现我们想要重复做的事情。这段代码会在每次循环时执行一次。
while循环在我们并不知道要重复执行多少次，而是要根据某个条件来决定是否继续循环时，是非常有用的。 比如，我们想要编写一个程序，让程序计算并显示斐波那契数列（每一项都是前两项之和）中小于1000的所有项。 虽然我们知道每一步都遵循一定的重复模式，但我们并不知道计算出最后一项小于1000的数时，究竟经过了多少步！
这时候我们可以试试使用while循环：
// 定义两个变量来存储前两项的值
var a = 1;
var b = 1;
// 显示前两项的值
document.write(a + "<br>");
document.write(b + "<br>");
// 定义一个变量来存储下一项的值
var c;
// 用一个while循环来计算并显示下一项的值
while (true) {
// 计算下一项的值
c = a + b;
// 判断下一项的值是否小于1000
if (c < 1000) {
// 如果是，就显示下一项的值，并换行
document.write(c + "<br>");
// 更新前两项的值
a = b;
b = c;
} else {
// 如果不是，就跳出循环
break;
}
}
输出结果如下：
1
1
2
3
5
8
13
21
34
55
89
144
233
377
610
987
break
我们在第二章中介绍switch结构的时候，提到过 break 语句，它可以用来跳出当前的switch结构。
而在上面的代码中我们可以发现，break 语句还可以用来跳出循环。
当程序执行到break语句时，就会跳出当前的循环，不再执行当前循环体中剩余的代码。需要注意的是，在嵌套循环（也就是套娃，循环中的循环）中，break 语句只能跳出当前层的循环。
例如在下面的代码中，break 语句只能跳出内层的循环，而不能跳出外层的循环，因此以下的代码会重复输出十遍 0 ~ 4 这五个数字，而不是只输出一遍。
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (j === 5) {
break;
}
console.log(j);
}
}
在使用 break 语句时，一定要清楚它的作用和影响，以及思考是否有更好的替代方案。就比如说上面的代码，其实可以直接这么写：
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 5; j++) {
console.log(j);
}
}
for 循环与 while 循环
不知道你发现了没有，上面计算斐波那契数列的代码是可以用for循环来取代的！因为for循环括号内的第二个表达式与while循环括号内的表达式一样， 都是 条件。用for循环的实现如下：
var a = 1;
var b = 1;
document.write(a + "<br>");
document.write(b + "<br>");
var c;
for(; true;) {
c = a + b;
if (c < 1000) {
document.write(c + "<br>");
a = b;
b = c;
} else {
break;
}
}
那么，for循环能实现的，while循环能实现吗？答案是肯定的！
例如，对于使用的打印 1 ～ 10 数字的例子，用while循环也是可以实现的，只不过，循环变量的初始化和递增语句需要我们写在不同地方：
// 用while循环显示从1到10的数字
var i = 1; // 初始化循环变量
while (i <= 10) { // 条件
document.write(i + "<br>");
i++; // 递增语句
}
运行上面的代码，你会发现效果是等价的。
循环的选择
你可能会疑惑，我们该什么时候使用for循环，什么时候使用while循环呢？
一般来说，如果你知道循环的次数，或者循环变量有一个明确的初始值和递增规则，那么使用for循环会比较方便， 因为它可以把循环变量的初始化、条件和递增语句写在一起，更加简洁明了。
而当你不知道循环的次数，或者只是想要根据某一条件来决定是否继续循环，又或者你想要在循环体中灵活地控制循环变量的变化时， 使用while循环会比较灵活。
当然，这并不是一个绝对的规则，有时候你也可以根据自己的喜好来选择使用哪种循环。只要你能保证循环的逻辑正确， 不会出现死循环（无限循环）或者奇奇怪怪的bug，使用for循环还是while循环，完全任君选择。😉
总结
在本章中，我们主要介绍了JavaScript中的for循环和while循环的概念、语法、用法和区别：
循环是指重复执行一段代码的过程，可以用来简化重复性的任务。
for循环是一种常用的循环结构，它可以让我们在知道循环次数或者循环变量的初始值和递增规则的情况下，方便地重复执行一段代码。 它的语法格式是：
for (初始化; 条件; 递增) { // 循环体}。while循环是另一种常用的循环结构，它可以让我们在不知道循环次数，而是根据某个条件来决定是否继续循环的情况下， 灵活地重复执行一段代码。它的语法格式是：
while (条件) { // 循环体}。for循环和while循环在功能上是等价的，都可以用来实现相同的效果， 但在使用上有一些区别。一般来说，如果我们知道循环次数或者循环变量有一个明确的初始值和递增规则，那么使用for循环会比较方便， 因为它可以把循环变量的初始化、条件和递增语句写在一起，更加简洁明了。 而当我们不知道循环次数，或者只是想要根据某一条件来决定是否继续循环，又或者我们想要在循环体中灵活地控制循环变量的变化时，使用while循环会比较灵活。
break语句可以用来跳出当前的循环，不再执行当前循环体中剩余的代码。在嵌套循环（也就是套娃，循环中的循环）中，break语句只能跳出当前层的循环。
小试牛刀
tips
本章的练习依然可以尝试使用线上沙盒： CodePen 完成😊
Don't Repeat Yourself
用for循环按顺序显示从1000到1的数字。
阶乘计算
实现一个函数，该函数接受一个数字作为参数，使用while循环计算这个数的阶乘。 完成函数的实现后，你需要调用这个函数，将结果显示在页面上。