JavaScript流程控制-循环（二）

1. 流程控制

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构指的是控制程序按照怎样的顺序执行的。

1. 顺序结构
   在JavaScript中，顺序结构是最基本的结构。所谓的顺序结构，说白了，就是代码按照从上到下、从左到右的“顺序”执行。
   语法：
   
2. 选择结构
   JavaScript中，选择结构指的是根据“条件判断”来决定使用哪一段代码。选择结构有3种：单向选择、双向选择以及多向选择，但是无论是哪一种，JavaScript都只会执行其中的一个分支。
   语法：
   
3. 循环结构
   循环结构，指的是根据条件来判断是否重复执行某一段程序。若条件为true，则继续循环；若条件为false，则退出循环。
   语法：
   

1.1 选择结构if

在JavaScript中，选择结构共有两种方式：一种是if语句；另外一种是switch语句。这一节我们先来介绍if语句。对于if语句，主要包括以下要点。
（1）单向选择：if…
（2）双向选择：if…else…
（3）多向选择：if…else if…else…
（4）if语句的嵌套

1.1.1 单向选择：if…

语法：

if(条件)
{
    ……
}

说明：
这个“条件”一般是一个比较表达式。如果“条件”返回为true，则会执行大括号{}内部的程序；如果“条件”返回为false，则会直接跳过大括号{}内部的程序，然后按照顺序来执行后面的程序。

1.1.2 双向选择：if…else…

语法：

if(条件)
{
    ……
}
else
{
    ……
}

说明：
“if…else…”相对“if…”来说，仅仅是多了一个选择。当条件返回为true时，会执行if后面大括号{}中的程序；当条件返回为false时，会执行else后面大括号{}中的程序。

1.1.3 多向选择：if…else if…else…

多向选择，就是在双向选择的基础上增加n个选择分支。
语法：

if(条件1)
{
    //当条件1为true时执行的代码
}
else if(条件2)
{
    //当条件2为true时执行的代码
}
else
{
    //当条件1和条件2都为false时执行的代码
}

说明：
多向选择语法看似很复杂，其实也是非常简单的，它只是在双向选择基础上再增加一个或多个选择分支罢了。

1.1.4 if语句的嵌套

在JavaScript中，if语句是可以嵌套使用的。
语法：

if(条件1)
{
    if(条件2)
    {
        当“条件1”和“条件2”都为true时执行的代码
    }
    else
    {
        当“条件1”为true、“条件2”为false时执行的代码
    }
}
else
{
    if(条件2)
    {
        当“条件1”为false、“条件2”为true时执行的代码
    }
    else
    {
        当“条件1”和“条件2”都为false时执行的代码
    }
}

说明：
对于这种结构，我们不需要去傻乎乎地去记，只需要从外到内根据条件一个个去判断就可以了。

1.2 选择结构switch

语法：

switch(判断值)
{
    case 取值1:
        语块1;break;
    case 取值2:
        语块2;break;
    ……
    case 取值n:
        语块n;break;
    default:
        语句块n+1;
}

说明：

• switch ：开关 转换 ， case ：小例子 选项。
• 关键字 switch 后面括号内可以是表达式或值， 通常是一个变量。
• 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号。
• switch 表达式的值会与结构中的 case 的值做比较。
• 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束。
• 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码。
• 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

 <script>
        var day = 3;
        var week;
        switch (day)
        {
            case 1:
                week = "星期一"; break;
            case 2:
                week = "星期二"; break;
            case 3:
                week = "星期三"; break;
            case 4:
                week = "星期四"; break;
            case 5:
                week = "星期五"; break;
            case 6:
                week = "星期六"; break;
            default:
                week = "星期日";
        }
        document.write("今天是" + week);    //输出今天是星期几
    </script>

2. 循环

在JavaScript中，循环语句指的是在“满足某个条件下”循环反复地执行某些操作的语句。

2.1 while循环

语法：

while(条件)
{
    //当条件为true时，循环执行
}

// 求1-100所以的整数和
var figure = 1;
        var sum = 0;
        while (figure <= 100) {
            sum += figure;
            figure++;
        }
        console.log('1-100的整数和为' + sum);

说明：

• 使用 while 循环时一定要注意，它必须要有退出条件，否则会称为死循环
• while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

对于while语句，我们还需要特别注意以下2点。
（1）循环内部的语句一定要用大括号{}括起来，即使是一条语句也要。while语句
（2）循环内部的语句一定要用大括号{}括起来，即使是一条语句也要。do…while语句

2.2 do…while循环

do {
  .......//循环体代码-条件表达式为true的时候重复执行循环一代码
}while(条件表达式);

// 求1-100所以的整数和
var n = 1;
        var sum = 0;
        do
        {
            sum += n;
            n++;
        }while (n <= 100);
        document.write("1+2+3+…+100 = " + sum);

说明：

• do…while语句首先是无条件执行循环体一次，然后再判断是否符合条件。如果符合条件，则重复执行循环体；如果不符合条件，则退出循环。
• do…while语句跟while语句是非常相似的，并且任何一个都可以转换成等价的另外一个。
• do…while语句结尾处括号后有一个分号（;），该分号一定不能省略。

2.3 for循环

在JavaScript中，除了while语句以及do…while语句，我们还可以使用for语句来实现循环。
语法：

for(初始化表达式; 条件表达式; 循环后操作)
{
    ……//循环体
}

例子：

// 求1-100所以的整数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    var sum = sum + i;
}
console.log(sum);

//一行打印5个星星
var star = '';
for (var i = 1; i <= 5; i++) {
     star += '☆';
 }
console.log(star);

☆☆☆☆☆

2.4 双重for循环

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

for(外循环的初始;外循环的条件;外形循环的操作表达式){
    for(内循环的初始;内循环的条件;内循环的操作表达式){
        需执行的代码;
    }
}

①打印五行五列星星

• 内层循环负责一行打印五个星星
• 外层循环负责打印五行

var star = '';
for(var j = 1;j<=5;j++)
{
   for (var i = 1; i <= 5; i++)
   {
     star += '☆'
   }
    //每次满5个星星就加一次换行
    star +='\n'  
}
console.log(star);

② 打印倒三角形

var star = '';
var row = prompt('请输入行数');
var col = prompt('请输入列数');
for (var i = 1; i <= row; i++) {
    for (var j = i; j <= col; j++) {
        star += '☆';
    }
    star += '\n';
}
console.log(star);

③打印九九乘法表

<script>
        for(var a=1;a<10;a++)
        {
            for (var b=1;b<=a;b++)
            {
                document.write(b+"*"+a+"="+a*b);
                document.write("    ");
            }
            document.write("<br/>");
        }
    </script>

说明：
① 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
② 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行 ③ 内层的 for 循环控制每行公式 j
④ 核心算法：每一行 公式的个数正好和行数一致， j <= i;
⑤ 每行打印完毕，都需要重新换一行
⑥ 把公式用 i 和 j 替换

注意：

• 内层循环可以看做外层循环的语句。
• 内层循环执行的顺序也要遵循 for 循环的执行顺序。
• 外层循环执行一次，内层循环要执行全部次数。

3. continue关键字

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子

for (var i = 1; i <= 5; i++) {
 if (i == 3) {
     console.log('这个包子有虫子，扔掉');
     continue; // 跳出本次循环，跳出的是第3次循环 
  }
  console.log('我正在吃第' + i + '个包子呢');
}

4. break关键字

break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的也不吃了。

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个for 循环，跳到整个for下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
 }

循环小结

JS 中循环有 for 、while 、 do while 。

• 三个循环很多情况下都可以相互替代使用。
• 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用 for
• while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些。
• while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行。
• while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体， 而 while 可能一次也不执行。
• 实际工作中，我们更常用for 循环语句，它写法更简洁直观， 所以这个要重点学习。