循环

循环

一、循环目的

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。

二、JS中的循环

在JS中，主要有三种类型的循环语句：
1、for 循环
2、while 循环
3、do…while 循环
下面我们就来详细的说一下这三个循环

for循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。

一、语法结构

for循环：重复执行某些代码，通常跟计数有关系。

上图显示的初始化变量，条件表达式和操作表达式的意思分别是：
1、初始化变量就是用var声明的一个普通变量， 通常用于作为计数器使用；
2、条件表达式就是用来决定每一次循环是否继续执行就是终止的条件；
3、操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更新(递增或者递减)。

二、我们来体验一下for循环

三、最后说一下它的执行过程

1、首先执行里面的计数器变量 var i = 1 ，但是这句话在for里面只执行一次。
2、去i <= 100来判断是否满足条件，如果满足条件就去执行循环体不满足条件退出循环
3、最后去执行i++，i++是单独写的代码递增，第一轮结束
4、接着去执行i <= 100如果满足条件 就去执行循环体 不满足条件退出循环 第轮二轮以此类推。

多提一个东西 断点调试：

那么什么是断点调试呢？
断点调试就是指自己在程序的某一行设置一 个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程：
1、浏览器中按F12–>sources -->找到需要调试的文件–>在程序的某一行设置断点；
2、Watch：监视，通过watch可以监视变量的值的变化，非常的常用。
3、F11：程序单步执行，让程序一行行的执行，这个时候，观察watch中变量的值的变化。
4、代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。咱们初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。

for循环重复的代码

一、语法结构

举个例子：


这个就是循环10次我爱你

二、例子（2）

我们还可以让用户自己输入次数：

for循环重复不相同的代码

for循环还可以重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会有变化。

举例：

for循环重复某些相同操作

for循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。

来个例子：

双重for循环

双重for循环的概述：
很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
循环嵌套是指：在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for循环，这样的for循环语句我们称之为双重for循环。

一、语法结构

二、体验一下：

三、来个for循环总结

1、for 循环可以重复执行某些相同代码；
2、for 循环可以重复执行些许不同的代码，因为我们有计数器；
3、for 循环可以重复执行某些操作，比如算术运算符加法操作；
4、随着需求增加，双重for循环可以做更多、更好看的效果；
5、双重for循环，外层循环一次，内层for循环全部执行；
6、for 循环是循环条件和数字直接相关的循环。

while循环

while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

一、语法结构

执行思路:
1、先执行条件表达式，如果结果为true，则执行循环体代码；如果为false，则退出循环，执行后面代码。
2、执行循环体代码。
3、循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束。

二、体验一下：

注意：
1、里面应该也有计数器初始化变量
2、里面应该也有操作表达式完成计数器的更新防止死循环

三、来个案例

弹出一个提示框，你爱我吗?如果输入我爱你，就提示结束，否则，一直询问。


输入的不是我爱你就会一直出：

直到输入我爱你

结束

do while 循环

do…while语句其实是while语句的一个变体。该循环会先执行次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

一、语法结构

执行思路：跟while不同的地方在于do while先执行一次循环体在判断条件如果条件表达式结果为真，则继续执行循环体，否则退出循环。

二、代码体验：

注意：与while不同的是，我们的do while 循环体至少执行一次。

三、案例

循环总结

1、JS中循环有for、while、do while；
2、三个循环很多情况下都可以相互替代使用；
3、如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for；
4、while和do…while可以做更复杂的判断条件，比for循环灵活一些；
5、while和do…while执行顺序不一样，while先判断后执行，do…while先执行一次，再判断执行；
6、while和do…while执行次数不一样，do…while至少会执行一次循环体，而while可能一 次也不执行。
7、实际工作中，我们更常用for循环语句，它写法更简洁直观，所以这个是重点…

continue和break

一、continue关键字：

continue关键字：用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)。

来个栗子

二、break关键字

break关键字用于立即跳出整个循环(循环结束)。

来个梨子：

[^1]：好了，这就是关于循环的所有内容，希望对你有所帮助，最后让我们一起加油努力吧！