JS流程控制语句

笔记来源：拉勾教育 – 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

流程控制语句

表达式、语句

表达式

一个表达式可以产生一个值，有可能是运算、函数调用、字面量，表达式可以放在任何需要值的地方

表达式总会先执行出一个结果，然后再参与其他程序

语句

可以理解成一个行为，一个程序种可能存在多个语句，一般情况下用分号分割语句

• 语句可以认为是给计算机的一个命令，执行这段代码
• 一般语句以分号结尾，特殊结构除外

流程控制语句

通过一定的js结构，来控制js加载的时候，跳过某段代码或者循环执行某段代码

• 条件分支语句
• 循环语句

条件分支语句

属于流程控制语句

if语句

最常用的条件分支语句，判断某个条件再去决定执行哪条分支

书写方法：if（条件表达式）{ 结构体1 } else { 结构体2 }

解读：如果条件表达式执行结果为true执行结构体1，否则执行结构体2

• 条件表达式：执行一个代码，强制得到一个布尔值的结果（true或fales）参与程序
• 结构体：{}包含一行或者多行语句，内部包含所有语句要执行都会执行，否则都不执行

// 用户输入份数，输出是否及格
var num = parseFloat(prompt('请输入分数',''));
// 判断份数是否大于等于60
if (num >= 60) {
  // 及格执行
 alert('恭喜，您及格了');
} else {
  // 不及格执行
  alert('很抱歉，您没有及格')
}

注意事项

• if语句两个分支不会都执行
• if语句如果没有写else分支，则如果if判断为true，则执行下面语句，反之为false则跳过if语句不执行
• 如果if后面的结构体是单行语句，可以省略{}不写，但是不建议，容易引起错误
• 殊途同归效果：if语句不论执行哪个结构体，执行完毕后都会执行下面的代码

多分支if语句

可以设置多个判断条件，执行不同的代码

书写方法：if（条件表达式）{ 结构体1 } else if（条件表达式2）{ 结构体2 } else if（条件表达式3）{ 结构体3 } .......else （）

解读：条件1符合执行结构体1，否则向下判断是否符合，如果符合执行对应结构体，如果都不满足执行最后else

// 用户输入份数，输出是否及格
var num = parseFloat(prompt('请输入份数',''));
if (num >= 85) {              // 判断分数大于等于85
  alert('优秀');
} else if(num >= 75) {        // 判断分数大于等于75小于85
  alert('良好');
} else if(num >= 60) {         // 判断分数大于等于60小于75
  alert('及格');
} else {                       // 上面条件都不满足
  alert('不及格');
}

注意事项

• 可以有多个else if但是最多只能有一个else，如果不写前面条件都不满足则跳过if语句
• 跳楼现象：如果满足其中一个条件直接执行结构体，执行完毕直接跳过后面的if条件，直接执行后面的语句

if语句嵌套

if语句可以类似于HTML结构的嵌套效果，可以在里面一个或多个添加if语句

如果想执行子if语句，前提必须是父if语句满足条件才行，可以简化多分支if语句

//需求：输入年龄和性别，判断是否符合退休年龄
var xb = prompt('请输入你的性别');
var nl = parseInt(prompt('请输入你的年龄'));
if (xb === '男') {
  if (nl >= 60) {
    alert('您符合退休年龄');
  } else {
    alert('您不符合退休年龄');
  }
} else if (xb === '女') {
  if (nl >= 55) {
    alert('您符合退休年龄');
  } else {
    alert('您不符合退休年龄');
  }
}

三元表达式

三元运算符，必须有三个操作数参与的运算，属于条件分支语句

书写方法：条件 ？结构体1：结构体2

解读：判断条件，如果输出为true执行结构体1，否则执行结构体2

// 三元表达式
console.log(true ? 1 : 0);  // 1

优点：

• 二选一的情况下，三元表达式结构简单
• 三元表达式必须运算出结果才能参与程序，可以利用这一特性将二选一结果赋值给变量

如果只是一个简单的二选一情况可以使用三元表达式

switch语句

也叫开关语句，允许一个程序求一个表达式的值(这个值可能不是布尔值)，并且尝试去匹配表达式的值到一个case标签，如果匹配成功，这个程序执行相关语句

//书写方式
switch(表达式) {
    case 值1:
        结构体1;
        break;
    case 值2:
        结构体3;
        break;
    .......
    default:
        结构体n;
        break;
}    

解读：

• switch：关键字，表示要进入一个开关语句
• 表达式：会求出一个值，这个值会跟后面的case的值去进行比对，比对过程中必须是全等匹配，否则匹配失败，如果和莫i个case值匹配成功，则会执行这个case的结构体
• case：作为关键字后面必须加一个空格后面书写需要匹配的值
• 结构体：case匹配成功后要执行的语句
• break：打断结构体，跳出switch语句，模拟if语句的跳楼现象
• drfault：类似于if语句里的else，如果前面的case都不能匹配成功，则执行这条

// 需求：输入星座，输出星座运势
var xz = prompt('请输入你的星座');
switch (xz) {
  case '白羊座' :
    alert('白羊座运势');
    break;
  case '金牛座' :
    alert('金牛座运势');
    break;
  case '双子座' :
    alert('双子座运势');
    break;
  case '双鱼座' :
    alert('双鱼座运势');
    break;
  case '巨蟹座' :
    alert('巨蟹座运势');
    break;
  case '狮子座' :
    alert('狮子座运势');
    break;
  case '处女座' :
    alert('处女座运势');
    break;
  case '天秤座' :
    alert('天秤座运势');
    break;
  case '天蝎座' :
    alert('天蝎座运势');
    break;
  case '射手座' :
    alert('射手座运势');
    break;
  case '摩羯座' :
    alert('摩羯座运势');
    break;
  case '水瓶座' :
    alert('水瓶座运势');
    break;
  default :
    alert('您是不是输入错误了？')
    break;
}

注意事项

default可以不写，类似于else

break关键字必须在每个case建议都要写，用来模拟跳楼现象，如果不写，就不会跳出结构体，会继续执行后面所有的case 语句，直到遇到break或者所有代码执行结束为止

针对通过一个变量匹配多个值的时候建议使用switch

利用不写break特殊效果

// 需求：输入月份，输出这个月有多少天
var yf = parseInt(prompt('请输入月份'));
switch (yf) {
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12:
    alert('这个月有31天')
    break;
  case 2:
    alert('这个月有28或者29天');
    break
  default:
    alert('这个月有28或者20天')
}

总结：

• if语句：所有判断场景都可以使用，最常用
• 三元表达式：多用于给条件赋值二选一的情况下
• switch：多用于一个表达匹配多个值时使用

循环语句

反复执行某个代码直到符合某个条件为止

for循环

属于前测试循环语句，指在执行一段代码之前先判断某个条件，如果输出为真，则执行，否则不执行并且跳出循环

//书写方法
for (①;②;④) {
  ③
}
⑤
//呆板的写法，这种写法只能涵盖for的一部分用法，并不是所有for循环都是这样的
for (创建循环变量;变量的最大值或最小值;步长) {
  循环体;
}

执行过程

for循环执行过程：遇到for循环，立即执行①位置的语句，执行完毕后立即执行②位置的语句，②位置会强制得到一个true或false的结果，如果为true表示入口条件为真，下一步执行③位置的语句，如果为false 表示入口条件为假，不再往下执行，直接跳出循环执行后面的⑤位置的语句。

如果能够执行到③位置，③是一个结构体必须执行完毕，再执行④位置的语句，执行完毕后再执行②位置的语句，回到了判断真假，如果为true, 继续执行③，再执行….直到②位置得到一个false的结果，循环结束跳出执行⑤

// 需求：输出小明的100年生日数据
for (let index = 1; index <= 100; index++) {
  console.log('小明今天' + index + '岁了');
}
console.log('小明百岁咯');

注意事项

• 小括号内不必须有两个分号存在
• for循环{}后面不需要加分号
• 如果②位置不写，相当于没有了入口条件，条件永远为真，循环提一直在执行，相当于进入了死循环，这种情况绝对不允许出现
• 同上，如果②设置的条件不合理，也会出现死循环，所以要注意，不要出现死循环
• ③位置是循环结构体，可以嵌套任何语句（if、for等等），要执行就都会执行，执行完毕后才会执行④位置
• 如果多层嵌套，注意新建的变量名不要重复，否则会出现问题

非刻板用法

var a = 1;
for (console.log('我甚至可以不在这里创建变量，但我只能执行一次'); a< 10; console.log('a++我可以不写在这里,每次执行循环体后我都会执行一次')) {
  console.log(a);
  console.log('我甚至可以把a++写在循环体里面，每一再次执行循环体我都会执行一次')
  a++;
}

所以说，for循环的写法不是固定的，只要结构合理就可以

循环嵌套

for (let i = 1; i <= 4; i++) {
  for (let j = 1; j <= 4; j++) {
    console.log(i, j);
  }
}

do while循环

属于后测试循环语句，指执行一次循环体后再进行条件判断，如果条件为真在进行下一次循环，否则跳出循环

//书写方法
do {
  循环体
} while (条件表达式);

解读

• do：做什么，每次的循环体
• while：当…的时候，判断条件是否满足

var i = 0;
    do {
      console.log(i);
      i++;
    } while (i < 10);

注意事项

• 循环变量定义在外面
• 变量自加的过程写在循环体内部
• 如果变量写在结构体内部，会出现死循环
• 变量自加写在循环体结尾和开头效果是不同的
• do while循环至少也会执行一次循环体，因为它是后判断的

while循环

前测试循环语句，在循环之前判断条件，条件为真才会执行循环体

//书写方法
while（表达式） {
    循环体
}

注意事项：

• 变量参与循环，需要在外部定义
• 变量自加写在循环体里面

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

总结

遇到必须执行一次的循环语句可以使用do while

如果必须先测试条件可以使用for和while循环

break语句

立即停止当前for、do while、while循环，位置不同，可以控制执行方式

//需求：找出1-30内有没有被5整除的数，找到就输出（找一个）
    var i = 1;
    while (i <= 30) {
      if (i % 5 === 0) {
        console.log(i);
        //满足条件后打断循环
        break;
      }
      i++;
    }

注意事项

只能停止自己所在的循环，如果是循环嵌套，只能停止一层，如果想停止指定某一层循环可以使用给循环起名的方式实现

// 给外层for起个名字
xh:for (let i = 0; i < 4; i++) {
  for (let j = 0; j < 4; j++) {
    console.log(i,j)
    if (j >= 2) {
      // 使用break跳出指定名字的循环
      break xh;
    }
  }
}

continue语句

跳过当次循环，立即进行下一次循环，可用于当某个循环执行到一半发现已经达成目的或者不是自己想要的，可以使用continue立即结束本次循环

不会跳出整个循环，而是跳出当次循环

//需求：找出1-30之间所有不是5倍数的数字并输出出来
var i = 1;
while (i <= 30) {
  if (i % 5 === 0) {
    i++;
    //跳出本次循环，直接进行下次循环
    continue;
  }
  //如果能执行到这里，说明不是5的倍数
  console.log(i);
  i++;
}

注意事项：

单独使用只能跳出一次循环，如果外部还包裹着循环不能停止控制外层循环停止的方法和breajk是一样的，都是给外层添加签名来调用

// 当j能被2整整除的时候跳过外层循环
xh: for (let i = 0; i < 4; i++) {
  for (let j = 1; j < 4; j++) {
    // 判断条件
    if (j % 2 === 0) {
      // 满足条件直接停止本次2外层for循环，进入下一次循环
      continue xh;
    }
    console.log(i, j);
  }
}

穷举思想

将所有需要的数据所在范围内的所有数据全部都列举出来，在根据某种规律对这些数据进行筛选，叫做穷举法。

技术

• for循环：使用for循环讲所有数据一一列举出来
• if语句：筛选判断需要的数据

// 选出所有6的约数
//使用for输出全部可能性数值
for (let i = 1; i <= 6; i++) {
  //if判断数值是否满足条件，满足既输出
  if(6 % i === 0) {
    console.log(i);
  }
}

// 需求：用户输入一个正数，程序输出所有约数
//获取用户输入，并转换为整数
var num = parseInt(prompt('请输入一个正整数'));
//筛选
//列举出所有数字
for (let i = 1; i <= num; i++) {
  //if判断数值是否满足条件，满足既输出
  if(num % i === 0) {
    console.log(i);
  }
}

累加器和累乘器

累加器

有时候我们需要的可能并不是某个数据，而是一些数据的和，可以想办法把这些数据加在一起存起来，叫做累加器

本质就是一个变量

案例：

// 需求：1到10之间所有数字的和
//创建累加器
var num = 0;
// 循环加
for (let i = 1; i <= 10; i++) {
  num += i;
}
//输出累加后的num
console.log(num);

注意事项

• 变量必须定义在循环外边，不能写在循环里面
• 累加器初始值必须设置，如果不设置可能会出现错误，一般初始值都是0
• 最后一次才是最终值，所以使用都是在循环之后使用

累乘器

类似于累加器，只不过由加法变成了乘法

案例

// 需求：1-10的累计程积（ 10！）
//创建累乘器
var num = 1;
// 循环乘
for (let i = 10; i >= 1; i--) {
  num *= i;
}
//输出累乘后的num
console.log(num);

注意事项

• 变量必须定义在循环外边，不能写在循环里面
• 累加器初始值必须设置，如果不设置可能会出现错误，一般初始值都是1
• 最后一次才是最终值，所以使用都是在循环之后使用

案例：水仙花数

需求：每个数位的三次方的和等于她自己

// //第二十四题：找出水仙花数
for (let i = 1000; i <= 9999; i++) {
 let gw = i % 10,
   sw = parseInt(i / 10) % 10,
   bw = parseInt(i / 10 / 10) % 10,
   qw = parseInt(i / 1000);
 if (Math.pow(gw, 4) + Math.pow(sw, 4) + Math.pow(bw, 4) + Math.pow(qw, 4) === i) {
   console.log(i + '是水仙花数');
 }
}