目标

  • 能够说出循环的目的
  • 能够说出for循环的执行过程
  • 能够使用断点调式来观察代码的执行过程
  • 能够使用for循环完成累加求和等案例
  • 能够使用for循环完成乘法表案例
  • 能够使用双重for循环合do while循环的区别
  • 能够说出break 和 continue的区别

1. 循环

循环目的

  • 在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

    JS中的循环

    在JS中, 主要有三种类型的循环语句:

  • for 循环

  • while循环

  • do…while循环

    2. for循环

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

    2.1语法结构

    for循环主要用于把某些代码循环若干次,通常跟计数有关系.其语法结构如下:

    1. for(初始化变量; 条件表达式; 操作表达式 ){
    2.   //循环体
    3. }

  • 初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。

  • 条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
  • 操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

    2.2 for循环重复相同的代码

    ```css // 基本写法 for(var i = 1; i <= 10; i++){ console.log(‘我想你了’); } // 用户输入次数 var num = prompt(‘请输入次数:’)； for ( var i = 1 ; i <= num; i++) { console.log(‘我想你了’); } 
  1. <a name="CmchD"></a>
  2. ## 2.3 for循环重复不相同的代码
  3. for循环可以重复不相同的代码，主要是因为使用了计数器，所以每一次循环的过程中都会有变化。<br />例如，求输出一个人1-100岁：
  4. ```javascript
  5. // for 里面是可以添加其他语句的 
  6. for (var i = 1; i <= 100; i++) { 
  7.  if (i == 1) {     console.log('这个人今年1岁了， 它出生了');
  8.  } else if (i == 100) {     console.log('这个人今年100岁了，它死了');
  9.   } else {        console.log('这个人今年' + i + '岁了');
  10.   } }

2.4 for循环重复某些相同的操作

for 循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算

3. 双重for循环

3.1 双重for循环概述

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

3.2 双重for循环语法

  1. for (外循环的初始; 外循环的条件; 外循环的操作表达式) {     
  2.   for (内循环的初始; 内循环的条件; 内循环的操作表达式) {         
  3.     需执行的代码;
  4.    }
  5. }
  • 内层循环可以看做外层循环的语句
  • 内层循环执行的顺序也要遵循 for 循环的执行顺序
  • 外层循环执行一次，内层循环要执行全部次数

4. while循环

若运行条件为true, 一直循环操作, 当条件为false则结束循环.
注意：
①使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
②while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

  1. while (条件表达式){
  2.   操作表达式
  3.   // 循环体
  4. }

5. do…while

先运行do的操作表达式, 再运行while的条件, 若为true则重复循环, false则结束循环;

  1. do{
  2.   操作表达式
  3.   // 循环体
  4. }while(条件表达式)

6. continue ; break;

continue用于终止本次循环, 但不会结束整个循环.
假设for循环5个数字, 我们在if中添加i==3; continue; 那么for只会输出1,2,4,5;

  1. for (i = 1; i <= 10; i++) {
  2.             if (i == 5) {
  3.                 continue;
  4.             } console.log(i);
  5.         }

break用于终止整个循环;
假设for循环5个数字, 我们在if中添加i==3; break; 那么for只会输出1,2;

  1. for (i = 1; i <= 10; i++) {
  2.             if (i == 5) {
  3.                 break;
  4.             } console.log(i);
  5.         }