循环基本概念

• 循环结构是程序中一种很重要的结构。其特点是,在给定条件成立时,反复执行某程序段, 直到条件不成立为止。

  • 给定的条件称为循环条件,反复执行的程序段称为循环体
  • 循环结构简单来说就是:一次又一次的执行相同的代码块

• 现实生活中的循坏

  
  

• JavaScript中的循坏

  • while语句;
  • do-while语句;
  • for语句;

while循环基本概念

• 格式:

while ( 条件表达式 ) {
     语句1;
     语句2;
     ....
 }

• while语句执行流程:

  • 判断条件表达式是否为真, 如果为真执行后面大括号中的内容
  • 执行完毕再次判断条件表达式是否还为真,如果为真执行后面大括号中的内容
  • 重复上述过程,直到条件不成立就结束while循环

    var num = 0;
    while (num < 10){
      alert(num); // 弹出0-9
      num++;
    }
    

• 构成循环结构的几个条件

  • 循环控制条件(条件表达式)
    • 循环退出的主要依据,来控制循环到底什么时候退出
  • 循环体(while后面的大括号{})
    • 循环的过程中重复执行的代码段
  • 循环结束语句(递增,递减,break等)
    • 能够让循环条件为假的依据,否则退出循环

• while循环特点:

  • 如果while中的条件一开始就不成立,那么循环体中的语句永远不会被执行

    var num = 10;
    while (num < 10){
        alert(num); // 什么都不弹
        num++;
    }
    

while循坏注意点

• 死循环
  • 条件表达式永远为真, 循坏永远无法结束,我们称之为死循环

    while (true){
        alert("nj666");
    }

• 任何值都有真假性
  • 对于非Boolean类型的值, 会先转换为Boolean类型再判断

    while (1){ // 先把1转换为Boolean, 然后再判断真假
        alert("nj666");
    }

• while 后如果只有一条语句它可以省略大括号
  • 如果省略大括号, while只会管制紧跟其后的那条语句

while (0)
   alert("会执行我么?"); // 不会执行
alert("nj 666");

• 分号问题
  • 分号(;)也是一条语句, 代表空语句

  while (0);
  {
      alert("123"); // 会被执行, 因为while管制的是分号(;)
  }

• 最简单的死循环
  • 企业开发中慎用死循环, 会导致程序阻塞

  while (1);

while循坏练习

• 提示用户输入一个正整数n， 计算1 + 2 + 3 + ...n的和
  • 企业开发从易到难, 先实现1加到5, 再实现1加到n

分析: 每次都是用上一次的和 加上一个递增的数
注意看, 每次加号之后的数是递增的2、3、4、5
            1 + 2 + 3 + 4 + 5 = 15
    ( 0 + 1)1 + 2
         (1 + 2)3 + 3
          1 + 2 + 3) 6 + 4
          (1 + 2 + 3 + 4) 10 + 5

    //    1.定义变量保存上一次的和
    var sum = 0;
    //    2.定义变量保存递增的数
    var number = 1;
    while (number <= 5) {
        console.log("sum = "+ sum +" + number = "+ number);
        sum = sum + number;
        number++;
    }
    console.log("sum = " + sum);

• 累加思想
  • 通过循环的形式进行累加操作,定义变量记录每次变化后的结果

• 获取1～100之间 7的倍数的个数并打印，并统计个数

    var count = 1;
    var num = 0;
    while (count <= 100) {

        if (count % 7 == 0) {

            console.log("count = " + count);
            num++;//计数器
        }
        count++;
    }

    console.log("number = "+ num);

• 计数器思想:
  • 通过循环的形式进行计数操作, 通过变量记录每次变化的值
  • 企业开发中, 当遇到要求统计什么什么 中 有多少个什么的时候,立刻想到计数器思想

break关键字

• 作用:

  • 跳出Switch语句

    var num = 1;
    switch(num){
        case 1:
            console.log("壹");// 输出壹
            break; // 跳出switch语句, 后面代码不会执行
        case 2:
            console.log("贰"); 
            break;
        default:
            console.log("非法数字");
            break;
    }
    

  • 跳出循环语句

    var num = 0;
    while(true){ 
        console.log(num);
        if(3 == num){
            break; // 当num等于3时跳出循环
        }
        num++
    }
    

• 注意点:

  • break关键字只能用于循环语句和switch语句, 在其它地方没有意义

    break;  // 浏览器会报错
    alert("我会输出么?");
    

    if(true){
        break; // 浏览器会报错
        alert("我会输出么?");
    }
    

  • 在多层循环中,一个break语句只向外跳一层

    while (1){
        while (2){
            console.log("我是while2"); // 会被输出多次
            break; // 跳出while2,但是不会跳出while1
        }
        console.log("我是while1");
    }
    

  • break后面的语句永远不会被执行

    while (1){
        break;
        alert("会弹出来么?"); // 不会弹出
    }
    

continue关键字

• 作用:

  • 跳过当前循环体中剩余的语句而继续下一次

    var num = 0;
    while (num < 10){
        num++;
        if(num % 2 == 0){
            continue;
        }
        console.log(num); // 1, 3, 5, 7, 9
    }
  

• 注意点:

  • 只能用于循环结构, 在其它地方没有意义
  • continue后面的语句永远不会被执行

    while (1){
        continue;
        alert("会弹出来么?"); // 不会弹出
    }
    

dowhile循环基本概念

• 格式

 do {
     语句1;
     语句2;
     ....
 } while ( 条件 );

• do-while语句执行流程:

  • 首先会执行一次循环体中的语句
  • 接着判断while中的条件表达式是否为真，如果为真再次执行循环体中的语句
  • 重复上述过程，直到条件不成立就结束while循环

    var num = 20;
    do{
        console.log(num); // 输出一次10
    }while (num < 10);
  

• while循环特点:

  • 不管while中的条件是否成立，循环体中的语句至少会被执行一遍

• 应用场景

  • 口令校验

学习交流方式:
1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
2.加入前端学习交流群:
302942894 / 289964053 / 11550038