JS流程控制语句

所谓的流程控制就是控制代码的执行顺序。

流程语句分类：

• 顺序结构: 按照定义的顺序，从上到下依次执行。
• 分支结构: 根据不同的情况，执行分支代码
• 循环结构: 重复做某一件事情

分支结构

if语句

分类：

• 单分支
• 双分支
• 多分支

语法：

单分支

// 条件表达式为真值则会执行{}代码体内的语句

if (/* 条件表达式 */) {
  // 代码体
}

双分支

// 双分支
if(/* 条件表达式 */){
    // 结果为真执行
}else{
    // 结果为假执行
}

多分支

// 多分支
if (/* 条件表达式1 */){
  // 成立执行语句
} else if (/* 条件表达式2 */){
  // 成立执行语句
} else if (/* 条件表达式3 */){
  // 成立执行语句
} else {
  // 上面条件表达式都不为满足，则执行这里
}


if (/* 条件表达式1 */){
  // 成立执行语句
} else if (/* 条件表达式2 */){
  // 成立执行语句
} else if (/* 条件表达式3 */){
  // 成立执行语句
}

---

案例

单分支

var age = 20;
if(age >= 18){
   console.log('你成年了')
}

双分支：判断是否成年

var age = 20;
if(age >= 18){
   console.log('成年了')
}else {
   console.log('未成年')
}

多分支：输入数字打印对应星期

var week = 1;
if(week === 1){
   console.log('星期一')
}else if(week === 2) {
   console.log('星期二')
}else if(week === 3) {
   console.log('星期三')
}else {
   console.log('不是星期一、二、三')
}

switch多分支语句

语法格式:

常量就是固定值

switch (条件表达式) {
 case 常量1:
   // 语句1;
   break;
 case 常量2:
   // 语句2;
   break;
 case 常量3:
   // 语句3;
   break;
 case 常量n:
   // 语句n;
   break;
 default:
   // 上面都不成立 执行这里语句;
   break;
}

注意：

• switch 语句在比较值时使用的是全等运算符（===）
• break代表跳出的意思，如果省略，代码会继续匹配下一个case
• switch语句它在功能上和if多分支语句很相似
  • 如果是范围的判断只能使用if多分支语句
  • 如果是固定值之间的判断， 推荐使用switch语句，更加直观点。

// 多分支：输入数字打印对应星期
       // var week = 6
       // if (week === 1) {
       //     console.log('今天是星期一');
       // } else if (week === 2) {
       //     console.log('今天是星期二');
       // } else if (week === 3) {
       //     console.log('今天是星期三');
       // } else if (week === 4) {
       //     console.log('今天是星期四');
       // } else if (week === 5) {
       //     console.log('今天是星期五');
       // } else {
       //     console.log('今天是周末，非常happy')
       // }

       // switch实现上面的功能
       var week = 1;
       switch (week) {
           case 1:
               console.log('今天是星期一');
               break; // break退出当层循环
           case 2:
               console.log('今天是星期二');
               break;
           case 3:
               console.log('今天是星期三');
               break;
           case 4:
               console.log('今天是星期四');
               break;
           case 5:
               console.log('今天是星期五');
               break;
           default:
               console.log('今天是周末，非常happy')

      }

---

循环结构

作用：一般多用来做些重复的事情。

比如打印出3句''你好汪哥'', 你可能会这么写：

console.log('你好汪哥')
console.log('你好汪哥')
console.log('你好汪哥')

打印出1-100只羊，你可能会这么做：

console.log('1只羊')
console.log('2只羊')
console.log('3只羊')
console.log('4只羊')
console.log('5只羊')
........
console.log('100只羊')

可见，如果程序中没有循环语句，会造成大量的重复代码，且后期难以维护。

而循环语句就是用来解决此类问题的。

Javascript中，循环语句有三种：

• for循环
• while
• do..while。

for语句

for循环语法：

for (1初始化变量; 2条件表达式; 3自增/自减表达式) {
 // 4代码体
}

执行规则：

• 先执行1，如果2成立，则执行43, 然后重复执行 243-243-243,
• 若2不成立， 则停止循环

示例代码：

for(var i = 0; i < 3; i++){
 console.log('你好世界')
}

for (var j = 3; j > 0; j--) {
 console.log('你好中国')
}

while循环语句

基本语法：

// 当循环条件为真值时，才执行代码体，
while (条件表达式) {
 // 代码体
}

代码示例：

// 打印10个hello
var i = 1;  // 循环的初始变量 为了控制循环的次数
while(i<=10){ // 条件表达式
console.log('hello');
i++; // 改变变量i的值
}

案例:打印1~10之间的数

//打印1~10之间的数 循环10次
var i = 1;
while(i<=10){
   console.log(i);
   i++;
}

案例:打印1~100以内的奇数

var i = 1;
while(i<=100){
   console.log(i);
   i = i+2;
}

案例：打印100以内所有偶数的和

var i = 1;
var sum = 0; //用于存储每次相加的和
while(i<=100){
   if(i % 2 === 0){
       sum = sum +i;
  }
   i++;
}

console.log(sum);

do...while语句

do..while循环和while循环非常像。

但是do..while的特点：先执行一次循环体，再进行判断

while: 先给钱后消费
do-while: 先消费后给钱

语法：

do {
 // 代码体;
} while (条件表达式)

案例：求1+2+3+...+100的和。

// 初始化变量
var i = 1;
// 累加和
var sum = 0;
do {
 sum += i;//循环体
 i++;//自增
} while (i <= 100);//循环条件

continue和break

• continue: 跳出本次循环，继续下一次循环。
• break: 跳出当层循环。

注意：如果有多层循环嵌套，在内层中break,仅会跳出内层循环，外层循环依然照常执行。

break案例： 一共10个馒头，准备要吃第五个时，发现吃不下了，后面的也就不吃了

for(var i=1;i<=10;i++){
   if(i == 5){
       break; // 跳出当层for循环
  }
   console.log("吃第"+i+"个馒头<br/>");
}

continue案例：一共10个饺子，当看到第五个饺子没熟。这个饺子就不吃了，接着吃剩下的。

for(var i=1;i<=10;i++){
    if(i == 5){
        continue; // 继续下一次循环，意味着下面代码不会执行
    }
    console.log("吃第"+i+"个饺子<br/>");
}

案例：判断质数

质数条件： 仅能被自身和1整除 。如 2, 3, 5, 7, 11,13、17、19、23、29等都是质数。

• 如18 就不是质数，因为可以被2 、3、6、9整除
• 20也不是质数，因为可以被2 、4、5，10整除

var flag = true; // 定义一个标志，假设是质数
       var number = 7;
       for (var i = 2; i < number; i++) {
           // 拿着比7小的数 2 3 4 5 6 依次求余进行判断，余数等于0，说明就不是质数
           if (number % i === 0) {
               // console.log(number + '不是质数')
               flag = false;
               break; // 发现不是质数，后面就没有必要在循环了，可以提高速度
          }
      }

       if (flag) {
           console.log(number + '是质数')
      } else {
           console.log(number + '不是质数')
      }

理解双层循环(套娃)

需求： 围着操场跑步，跑3圈，每跑一圈喝2口水

// 需求： 围着操场跑步，跑3圈，每跑一圈喝2口水。
for (var i = 1; i <= 3; i++) {
   console.log('跑第' + i + '圈')

   for (var j = 1; j <= 2; j++) {
       console.log('喝' + j + '口水')
  }
}

• 打印1-100内的质数。

质数条件： 仅能被自身和1整除 。如 2, 3, 5, 7, 11,13、17、19、23、29等都是质数。

• 如18 就不是质数，因为可以被2 、3、6、9整除
• 20也不是质数，因为可以被2 、4、5，10整除

// 当循环到5时，要对比它小的数如 2，3、4 进行依次求余，若等于0，则不是质数
// 当循环到6时，要对比它小的数如 2，3、4,5 进行依次求余，若等于0，则不是质数  
for(var i = 2; i < 100; i++){
   var flag = true; // 假设当前i是质数
   for(var j = 2; j < i; j++){
       if(i % j === 0 ){
           // 说明不是质数
           flag = false;
           break; // 后面没必要判断，直接退出当层for循环
      }
  }

   if(flag){
       console.log(i + '是质数')
  }

}

九九乘法表

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      * {
           padding: 0;
           margin: 0;
      }
     
       span {
           display: inline-block;
           width: 80px;
           border:1px solid #666;
           margin: 1px;
      }
   </style>
   <script>
       var htmlStr = ""
       // 外层控制行数 共9行
       for (var row = 1; row <= 9; row++) {
        
           htmlStr += "<div>"
           // 内层循环控制列数，
           for (var column = 1; column <= row; column++) {
               htmlStr += "<span>" + column + "x" + row + "=" + column * row + " </span>"
          }
         
           htmlStr += "</div>"
      }
       document.write(htmlStr)
   </script>
</head>
<body>  
</body>
   
</html>