JavaScript循环结构

mzmm403
93 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天

循环结构

循环

目的

  • 可以重复执行某些语句

分类

  • for循环
  • while循环
  • do while循环

for循环

定义

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

语法结构

for (初始变量;条件表达式;操作表达式){
    循环体;
}

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

  • 初始化便变量，就是用var声明的一个普通变量，通常用作计数器

  • 条件表达式，就是用来决定每一次循环是否继续执行，就是终止条件

  • 操作表达式，就是每次循环最后执行的代码，经常用于我们计数器变量进行更新（递增或递减）

代码示例

for (var i = 1; i <= 100; i++){
    console.log('mzmm403');
}

代码运行过程:

  1. 先运行var i = 1
  2. 运行i <= 100，此时 i=1，所以进入循环语句
  3. 执行循环语句 console.log('mzmm403');
  4. 执行 i++，再进入i <= 100，此时 i=2
  5. 再执行循环语句 console.log('mzmm403');
  6. 然后在条件表达式，操作表达式和循环体中往复循环
  7. 当循环到最后i递增到101时跳到i <= 100语句中，然后直接跳出循环

我们还可以让用户控制循环次数

var num = prompt('请输入次数');
for (var i = 1; i <= num; i++){
    console.log('mzmm403');
}

重复执行不相同的代码

因为我们有计数器变量i的存在，i每次都会变化

for (var i = 1;i <= 100;i++){
    console.log('这个人今年'+i+'岁了');
}

双重for循环概述

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以嵌套一个for 循环，这样的for循环语句我们称之为双重for循环

  • 语法结构
for (外层的初始化变量;外层条件变量;外层的操作表达式){
    for (里层的初始化变量;里层条件变量;里层的操作表达式){
        //执行语句
    }
}
  • 我们可以把里面的循环看作是外层循环的语句
  • 外层循环循环一次，里面的循环执行全部
for (var i = 1;i <= 3;i++){
    console.log('这是外层的第'+ i +'次')
    for (var j = 1;j <= 3;j++){
        console.log('这是里层的第'+ j +'次')
    }
}
  • 案例
var str = ''
for (var i = 1; i <= 10; i++){
	for (var j = i; j<=10; j++){
		str = str + '※'
	}
	str += '\n';
}
console.log(str);

image-20220622150020627.png

小结

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

while循环

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

语法结构

while (条件表达式){
    //循环体代码
}

代码运行过程:

  1. 先执行条件表达式，如果为true，则执行循环体代码；如果为false，则退出循环体，执行后面的代码
  2. 执行循环体代码
  3. 循环体代码执行完毕后，程序继续判断执行条件表达式，如果仍未true，则会继续执行循环体，直到条件为false
  • while循环中，应该有计数器，初始变量
  • while循环中，应该有操作表达式，完成计数器的更新，防止死循环

do while循环

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

语法结构

do{
    //循环语句
}while(条件表达式)

与while循环的差别

  • 其实与while循环执行过程基本一致，只是比while循环先多一遍执行循环语句，再判断条件，满足则继续执行循环语句否则不执行

  • do while 循环至少执行一次循环语句

小结

  • JS中有for、while、do while循环
  • 三种循环很多情况下都可以相互替代
  • 如果是用来计次数，跟数字有关的，三者使用基本相同
  • for相对于其他两种更灵活
  • while和do...while的执行顺序不一样，并且do while至少执行一次循环语句

continue和break

continue：用于立即跳出本次循环并进入下一次循环

  • 例子
// 求1-100之间，除了能被7整除之外的整数和
var sum = 0;
for (var i = 1; i <= 100; i++){
    if (i % 7 == 0){
        continue;
    }
    sum += i;
}
console.log(sum);

break：立即跳出整个循环

  • 例子
//吃5个包子，吃到第三个包子发现包子坏了，剩下的包子都不吃了，找老板退钱
for (var i = 1; i <= 5; i++){
    if (i == 3){
        break;
    }
    console.log('我在吃'+i+'包子')
}
console.log('老板退钱!!!')
avatar
文章
阅读
粉丝