JS基础:循环结构

目录

1. 循环

2. for 循环

2.1 打印1-100的数字

 2.2 for 循环过程

2.3 断点测试

 2.4 1-100累加和

2.5 1-100的所有奇数和偶数之和

 2.6 由班级人数求班级成绩平均分

2.7 一行打印小星星案例

 2.8 双重for循环

 2.8.1 打印五行五列星星

2.8.3 打印九九乘法表

2.8.4 for 循环小结

3. while 循环

3.1 计算1-100的总和

4. do while 循环

5. 循环小结

6. continue break

6.1 continue 关键字

6.2 break 关键字


1. 循环

循环的目的是可以重复执行代码

JS 中有三种类型的循环语句:for 循环、while循环、do...while循环

2. for 循环

在程序中,一组被重复执行的语句称循环体,能是否被重复执行,取决于中止条件

由循环体及循环的终止条件组成的语句,称为循环语句

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

        //循环体;

}

  •  初始化变量,就是var 声明的一个普通变量,作为计数器
  • 条件表达式就是用来决定是否继续执行,就是终止条件
  • 操作表达式,每次循环最后执行的代码,常用于计数器变量的更新(递增递减)

2.1 打印1-100的数字

JS基础:循环结构_第1张图片

 2.2 for 循环过程

  1. 首先执行 var i =1.这句话只执行一次
  2. 是否满足 i < 100 条件,如果满足则去执行循环体(console.log(i););如果不满足则跳出循环
  3. 最后执行 i ++; 第一轮循环结束

2.3 断点测试

断点测试可以观察程序运行的过程

在浏览器中按F12键(或者是右键选择检查按钮)---选择源代码(sourse)--- 找到文件 ----在程序的的某一行设置断点----下一步

调试代码的能力很重要,初学者需要不断地区调试代码,才能学会自己解决bug的能力

 2.4 1-100累加和

JS基础:循环结构_第2张图片

2.5 1-100的所有奇数和偶数之和

JS基础:循环结构_第3张图片

 2.6 由班级人数求班级成绩平均分

案例:用户输入班级人数,按照班级人数一个一个输入分数,最后算出班级的平均分

JS基础:循环结构_第4张图片

 注意:prompt 获取的是字符型,不能进行运算,需要用parseFloat转为浮点型才能进行运算。

2.7 一行打印小星星案例

JS基础:循环结构_第5张图片

 2.8 双重for循环

循环嵌套是值在一个循环语句中再定义一个循环语句的语法结构,例如在for循环嵌套一个for循环,称双重for循环。

for (){

        for (){

        }

}

  •  可以把里循环看做外循环语句
  • 外循环一次,里循环执行全部

 2.8.1 打印五行五列星星

思路,内循环打印一行五个星星,外循环打印五行星星

JS基础:循环结构_第6张图片

2.8.2 打印倒三角案例

JS基础:循环结构_第7张图片

  •  外循环控制行数
  • 里循环打印个数不一样 i=k
  • 注意打印正三角还是倒三角它们的里循环都是不变的,变得是外循环

2.8.3 打印九九乘法表

JS基础:循环结构_第8张图片

  •  案例分析:
  • 一共9行,每行个数不一样,用双重for循环
  • 外循环控制行数 i,循环9次
  • 内循环控制每行公式 j
  • 核心算法:每行公式的个数等于行数, j<=i;

2.8.4 for 循环小结

  1. 可以重复执行某些相同的代码
  2. 可以重复执行不同的代码,因为有计数器
  3. 可以重复执行某种操作,比如算数运算符
  4. 双重for循环可以做更多效果

3. while 循环

while语句在条件表达式为真的前提下执行代码,直到表达式不为真时结束循环

while (条件表达式){

        //循环代码;

}

 执行思路:当条件表达式的结果为真,则执行循环体,否则退出循环

有计数器,初始化变量

有操作表达式,完成计数器的更新,防止死循环

3.1 计算1-100的总和

JS基础:循环结构_第9张图片

4. do while 循环

do while 循环是while循环的变体,它会先执行一次循环体,再判断条件表达式是否为真,为真会重复执行循环体,为假会退出循环

do {

        //循环体

} while(条件表达式)

 注意:是先循环再判断,do while 是会少执行一次循环体的

5. 循环小结

  1. js中有for、while、do while 循环三种
  2. 三种循环可以相互转换
  3. 如果来记次数,更经常使用for循环
  4. while 和 do while 可以做更复杂的判断条件,比for灵活一些
  5. while 先判断后执行,do while 先执行后判断;do while 会少执行一次循环体

6. continue break

6.1 continue 关键字

continue 关键字用来跳出本次循环,继续下一次循环(在本次循环体中少执行一次)

JS基础:循环结构_第10张图片

 JS基础:循环结构_第11张图片

6.2 break 关键字

break 关键字立即跳出整个循环

JS基础:循环结构_第12张图片 

你可能感兴趣的:(JavaScript,javascript,前端,vscode)