Web前端基础—JavaScript基础(流程控制—循环)

2021/7/27 11:36:13

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

流程控制—循环

  1. 循环的目的

可以重复执行某些代码。

  1. JS中的循环
  1. for循环
  2. while循环
  3. do...while循环
  1. for循环

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

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

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基础(流程控制—循环)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程