跳到主要内容

06-JavaScript流程控制

流程控制​

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

顺序结构​

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

if第一种形式​

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

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

if第二种形式​

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

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

if第三种形式​

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

特点

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

if注意事项​

  1. 对于非布尔类型的数据, 会先转换成布尔类型再判断
if(null){
if(1){
    console.log("语句A");
}
console.log("语句B");
  1. 对于==/===判断, 将常量写在前面
let num = 10;
if(num = 5){  //建议使用这种写法来避免赋值运算 if(5 == num)
    console.log("语句A");
}
console.log("语句B");
  1. if/else if/else后面的大括号都可以略, 但是省略之后只有紧随其后的语句受到控制
if(false)
    console.log("语句A");
    console.log("语句B");
    //“语句B”将不受if的控制
  1. 在JavaScript中分号(;)也是一条语句(空句)
if(false);{
    console.log("语句A");
    console.log("语句B");
}
//假如添加了分号;  {}括号中的语句将不受if的影响
  1. if选择结构可以嵌套使用
if(true){
    if(false){
        console.log("语句A1");
    }else{
        console.log("语句B1");
    }
}else{
    if(false){
        console.log("语句A2");
    }else{
        console.log("语句B2");
    }
}
  1. 当if选择结构省略大括号时, else if/else会自动和距离最近没有被使用的if匹配
if(0)
    if(1)
        console.log("A");
    else
        console.log("B");
else
    if (1)
        console.log("C");
    else
        console.log("D");

⚠️注意

  • 如果条件满足之后只有一句代码需要执行, 那么就使用三目运算符
  • 在企业开发中, 如果条件满足之后有多句代码需要执行, 那么就使用选择结构

选择结构​

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

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

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

Switch基本格式​

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注意事项​

  1. case判断的是===, 而不是==
let num = 123;
switch (num) {
    case "123":
        console.log("字符串123");
        break;
    case 123:
        console.log("数值的123");  	//结果为第二选择
        break;
    default:
        console.log("Other");
        break;
}
  1. ()中可以是常量也可以是变量还可以是表达式
let num = 123;
switch (num) { 		// 变量
switch (123) { 		// 常量
switch (122 + 1) {	 // 表达式
    case 123:
        console.log("数值的123");
        break;
    default:
        console.log("Other");
        break;
}
  1. case后面可以是常量也可以是变量还可以是表达式
let num = 123;
switch (123) {
    // case 123: // 常量
    // case num: // 变量
    case 100 + 23: // 变量
        console.log("数值的123");
        break;
    default:
        console.log("Other");
        break;
}
  1. 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;
}
  1. 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;
}
  1. 和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

循环结构​

在给定条件成立的情况下，反复执行某一段代码。

  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的倍数"))

//计算器
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`循环