Web前端基础—JavaScript基础（流程控制—循环）

本文主要是介绍Web前端基础—JavaScript基础（流程控制—循环），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

流程控制—循环

1. 循环的目的

可以重复执行某些代码。

1. JS中的循环

1. for循环
2. while循环
3. do...while循环

1. for循环

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

1. 1. for循环的语法结构
2. 用来重复执行某些代码，通常和计数有关。

for（初始化变量;条件表达式;操作表达式）{

循环体

}

1. 初始化变量：就是用var声明的一个变量，通常作为计数器使用。
2. 条件表达式：就是用来决定每一次循环是否继续执行，决定循环执行的次数。
3. 操作表达式：是每次循环最后执行的代码，经常用于我们计数器变量经行更新（递增或者递减）
4. for循环的执行过程：①②④③②④③②④③....

for (var i = 1; i <= 100; i++) {

            console.log('你好吗');

        }

1. 首先执行里面的计数器变量  var i = 1 .但是这句话在for 里面只执行一次  index

2. 去 i <= 100 来判断是否满足条件， 如果满足条件  就去执行 循环体  不满足条件退出循环

3. 最后去执行 i++   i++是单独写的代码 递增  第一轮结束

4. 接着去执行 i <= 100 如果满足条件  就去执行 循环体  不满足条件退出循环   第二轮

1. 断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程

断点调试的流程：

1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点

2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。

3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

1. 双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。

5.1 双重for循环 语法结构

         for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {

             for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {

                 // 执行语句;

             }

        }

 5.2 我们可以把里面的循环看做是外层循环的语句

 5.3. 外层循环循环一次， 里面的循环执行全部  且  里面的循环每次都要全部执行。

5.4 案例：九九乘法表

        // 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环

        // 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行  

        // 内层的 for 循环控制每行公式  j  

        // 核心算法：每一行 公式的个数正好和行数一致， j <= i;

        // 每行打印完毕，都需要重新换一行

         var str = '';

         for (var i = 1; i <= 9; i++) { // 外层循环控制行数

             for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数  j <= i

                 // 1 × 2 = 2

                 // str = str + '★';

                 str += j + '×' + i + '=' + i * j + '\t';

             }

             str += '\n';

         }

         console.log(str);

1. while循环

6.1 while循环语法结构

while(条件表达式){

循环体

}

6.2 while循环执行思路

当条件表达式结果为true，则执行循环体；否则退出循环。

6.3 代码验证

var num = 1;

while (num <= 100) {

console.log(‘好’);

num++;

}

注意：

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

1. do  while循环

7.1语法结构

do{

//循环体

}  while(条件表达式)

7.2执行思路

跟while不同的是  do while 先执行一次循环体，再判断条件。如果条件表达式结果为真，则继续执行循环体，否则退出循环体。

7.3. 代码验证

        var i = 1;

        do {

            console.log('how are you?');

            i++;

        } while (i <= 100)

7.4. 我们的do while 循环体至少执行一次

1. continue 和break

8.1continue关键字（跳出之后还要继续执行循环）

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

8.2break关键字（跳出之后还要结束整个循环）

这篇关于Web前端基础—JavaScript基础（流程控制—循环）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！