JS流程控制与循环语句

参考网道文档

流程控制

JavaScript提供3种流程结构，不同的流程结构可以实现不同的运行流程。这3种流程结构分别是顺序、选择、循环三种基本控制结构构造.

顺序结构

默认的流程结构。按照书写顺序从上至下执行每一条语句。

if 语句

if(条件表达式){
    条件满足执行的语句;
}

特点：当条件表达式为真的时候就会执行中所有的代码, 并且只会执行一次

if(条件表达式){
    条件成立执行的语句;
    }else{
        条件不成立执行的语句;
    }

当条件满足就执行if后面中的代码，当条件不满足就执行else后面中的代码，并且两个只有一个会被执行, 并且只会被执行一次

if(条件表达式A){
    条件A满足执行的语句;
}else if(条件表达式B){
    条件B满足执行的语句;
}
... ...
else{
    前面所有条件都不满足执行的语句;
}

• 从上至下的依次判断每一个条件表达式, 哪一个条件表达式满足, 就执行该条件表达式后面中的代码
• 如果前面所有的条件表达式都不满足, 就会执行else后面中的代码
• 并且众多的大括号只有一个会被执行, 并且只会执行一次

注意事项

对于非布尔类型的数据, 会先转换成布尔类型再判断

if(null){
if(1){
    console.log("语句A");
}
console.log("语句B");

if/else if/else后面的大括号都可以略, 但是省略之后只有紧随其后的语句受到控制

if(false)
    console.log("语句A");
    console.log("语句B");
    //“语句B”将不受if的控制

在JavaScript中分号(;)也是一条语句(空句)

if(false);{
    console.log("语句A");
    console.log("语句B");
}
//假如添加了分号;  {}括号中的语句将不受if的影响

⚠️注意

• 条件满足后只有一句代码需要执行, 可以使用三目运算符
• 条件满足后有多句代码需要执行，就使用选择结构

问号冒号表达式

三目运算符又称问号冒号表达式

语法：condition ? exprIfTrue : exprIfFalse

function max(a,b){
    return (a > b) ? a:b;	// 最大值对比输出
}

选择结构

对给定的条件进行判断，再根据判断结果来决定执行哪一段代码。

选择结构1：if的排序 江哥讲解

选项结构2：switch都会对指定的条件进行判断，再根据判断结果来决定执行哪一段代码

Switch基本格式

必须在case 表达式内添加break

switch(条件表达式){
  case 表达式:
      语句1;
      break;
  case 表达式:
      语句2;
      break;
  case 表达式n:
      语句n;
      break;
  default:
      语句n+1;
      break;
}

语义说明：

• 计算条件表达式的值。逐个与case后面表达式的结果值比较；
• 当条件表达式的值与某个表达式的值全等===时, 执行其后的语句,并且不会再与其它case进行比较；
• 如条件表达式的值与所有case后的表达式均不相同时,则执行default后的语句。

示例说明

var num = 2;
switch(num){
    case 1:
        console.log("壹");
        break;
    case 2:
        console.log("贰"); // 输出贰
        break;
    case 3:
        console.log("叁");
        break;
    default:
        console.log("非法数字");
        break;
}

switch 案例分析

case判断的是===, 而不是==

let num = 123;
switch (num) {
    case "123":
        console.log("字符串123");
        break;
    case 123:
        console.log("数值的123");  	//结果为第二选择
        break;
    default:
        console.log("Other");
        break;
}

()中可以是常量也可以是变量还可以是表达式

let num = 123;
switch (num) { 		// 变量
switch (123) { 		// 常量
switch (122 + 1) {	 // 表达式
    case 123:
        console.log("数值的123");
        break;
    default:
        console.log("Other");
        break;
}

case后面可以是常量也可以是变量还可以是表达式

let num = 123;
switch (123) {
    // case 123: // 常量
    // case num: // 变量
    case 100 + 23: // 变量
        console.log("数值的123");
        break;
    default:
        console.log("Other");
        break;
}

break的作用是立即结束整个switch语句 在switch语句中一旦case或者default被匹配,那么其它的case和default都会失效，但没有break的语句，一样会输出console.log中的数据

let num = 1;
switch (num) {
    case 1:
        console.log("1");
        break;
    case 2:
        console.log("2");
        break;
    default:
        console.log("Other");
        break;
}

default不一定要写在最后 switch中的default无论放到什么位置, 都会在所有case都不匹配再执行

let num = 7;
switch (num) {
    default:
        console.log("Other");
        break;
    case 1:
        console.log("1");
        break;
    default:
        console.log("Other");
        break;
    case 2:
        console.log("2");
        break;
}

和if/else中的else一样, default也可以忽略

let num = 7;
switch (num) {
    case 1:
        console.log("1");
        break;
    case 2:
        console.log("2");
        break;
}

if 和 switch 选择

• 对区间进行判断, 那么建议使用if
• 对几个固定的值的判断, 那么建议使用switch
• 原则: 能用if就用if

**历史遗留问题：**每一个case需要添加break，是当初设计的问题，可以参考近来比较优美的swift swich写法。

---

循环结构

在给定条件成立的情况下，反复执行某一段代码。一般有三种类型

1. while语句;
2. do-while语句;
3. for语句;

while的格式

while(条件表达式){
    条件满足执行的语句;
}

var i=0;
while (i<5){
    console.log('输出数字为 ' + i);
    i++;
}
/*  输出结果 ↓
输出数字为 0
输出数字为 1
输出数字为 2
输出数字为 3
输出数字为 4
*/

while的特点: 满足条件表达式为真执行后面的代码，对if相比while会被执行多次，执行到不满足条件为止，缺失条件会陷入死循环。

var i=0;
while (i<10){
    if (i % 2 === 1){
        console.log('跳过')
        i++;		// 避免进入死循环
        continue;
    }
    console.log('输出数字为 ' + i);
    i++;
}
/*  ↓ 输出结果
输出数字为 0
跳过
输出数字为 2
跳过
输出数字为 4
跳过
输出数字为 6
跳过
输出数字为 8
跳过
*/

死循环案例

不要轻易执行该案例，死机不负责

var i=0;
while (i<10){
    if (i % 2 === 1){
        console.log('跳过')
        continue;	// 满足条件会跳过下面的代码，条件永远为真，进入死循环
    }
    console.log('输出数字为 ' + i);
    i++;		// 增量表达式放在后面会进入死循环
}

书写循环结构的规则

1. 先写上循环结构的代码
2. 将需要重复执行的代码拷贝到中
3. 再()中指定循环的结束条件

案例：任意数值计算7的倍数

// 将用户输入的数据转换为数值
let a = Number(prompt("请输入任意数字计算7的倍数"))

//计算器j
let count=0;

//判断数值大于等于0
while( 0 <= a ){
    console.log(a);
    a = a-7;
    count++;
}
console.log( "共有" + count + "个'7'的倍");

do-while循环的格式

do{
    需要重复执行的代码;
}while(条件表达式);

dowhile循环的特点: 无论条件表达式是否为真, 循环体都会被执行一次

while和dowhile如何选择

1. 大部分情况下while循环和dowhile循环是可以互换的
2. 如果循环体中的代码无论如何都需要先执行一次, 那么建议使用do-while循环，其它的情况都建议使用while循环

for循环的格式

for循环的特点和while循环的特点一样, 只有条件表达式为真, 才会执行循环体

//  条件表达式、循环体、增量表达式「三者不断循环」
for(初始化表达式;条件表达式;循环后增量表达式){
    需要重复执行的代码;
}

for(let num = 1;num <= 10;num++){
    console.log("发射子弹" + num);
}

两种循环方式实现同一种需求

let a = Number(prompt("请输入任意数字计算7的倍数"))
let count=0;
while( 0 < a ){
    console.log(a);
    a = a-7;
    count++;
}
console.log( "共有" + count + "个'7'的倍数");


let count=0;
for( let a = Number(prompt("请输入任意数字计算7的倍数"));0 < a; a = a-7){
    console.log(a);
    count++;
}
console.log( "共有" + count + "个'7'的倍数");

for 和 while 的选择

1. 在for循环中"初始化表达式""条件表达式""循环后增量表达式"都可以不写
2. 如果是for循环, 在循环结束之后可以让外界使用，也可以不让外界使用
3. 在开发中由于for循环比while循环要灵活，能用``for循环就用for`循环

---

break 与 continue 语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。

break语句用于跳出代码块或循环。

var i = 0;
while(i < 10) {
  if ( i  === 5 ) break;       // 将 break 换成 continue 则会进入死循环
  console.log('i 当前为：' + i);
  i++;
}

上面代码只会执行10次循环，一旦i等于5，就会跳循环。

⚠️注意 continue 用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。若然增量表达式在continue后面，只要符合条件增量表达则永远不会执行，进入死循环状态

var i=0;
while (i<10){
    if (i % 2 === 1){
        console.log('跳过')
        i++;		// 避免进入死循环
        continue;
    }
    console.log('输出数字为 ' + i);
    i++;
}
// 这样写法并不优雅，实际很少使用

建议采用for循环

for(let i = 0;i < 10;i++){
    if(i % 2 === 1) continue;
    console.log('输出数字为 ' + i)
}
/*
输出数字为 0
输出数字为 2
输出数字为 4
输出数字为 6
输出数字为 8
*/

如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。

for(let i = 1;i < 10;i++){
    if(i % 2 === 0) {
        if(i === 4){
            continue;		// 跳出i=4的条件判断
        }
        console.log('这个为数字双数 ' + i)
        continue
    }
}
/*
这个为数字双数 2
这个为数字双数 6
这个为数字双数 8
*/

---

label（标签）

网道文档

MDN：label 使用指南

JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。

label:
  语句

在 for 循环中使用带标记的 break

var i, j;

loop1:
    for (i = 0; i < 3; i++) {      // 标签1
       loop2:
       for (j = 0; j < 3; j++) {   // 标签2
          if (i == 1 && j == 1) {
             break loop1;	// 符合条件，跳转到 loop 1
          }
          console.log("i = " + i + ", j = " + j);
       }
    }
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"

在标记块中使用 break

foo: {
  console.log('hello');
  break foo;
  console.log('world !');
}
// 'hello'

---

end.