JavaScript流程控制

本章内容

1.运算符

2.语句

3.循环

4.if 多分支和switch的区别

运算符

赋值运算符

赋值运算符：对变量进行赋值的运算符

赋值运算符(=)将等号右边的值赋予给左边, 要求左边必须是一个容器

其它赋值运算符:+=,-=,*=,/=,%=;使用这些运算符可以在对变量赋值时进行快速操作

简化写法

一元运算符

一元运算符:正负号

前置自增:++i

后置自增:i++

前置自增和后置自增单独使用没有区别:

前置自增和后置自增如果参与运算就有区别:

比较运算符

应用场景:比较两个数据大小、是否相等

>： 左边是否大于右边

<： 左边是否小于右边

>=： 左边是否大于或等于右边

<=： 左边是否小于或等于右边

==： 左右两边值是否相等

===： 左右两边是否类型和值都相等(全等)

!==： 左右两边是否不全等(不全等)

!=: 不等

比较结果为boolean类型，即只会得到 true 或 false

= 单等是赋值

== 是判断

=== 是全等

开发中判断是否相等，强烈推荐使用 ===

  console.log(3 > 5)
    console.log(3 >= 3)
    console.log(2 == 2)
    // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
    console.log(2 == '2')  // true
    console.log(undefined === null)
    // === 全等 判断 值 和 数据类型都一样才行
    // 以后判断是否相等 请用 ===  
    console.log(2 === '2')
    console.log(NaN === NaN) // NaN 不等于任何人，包括他自己
	 //不全等
    console.log(2 !== '2')  // true  
	// 不等
    console.log(2 != '2') // false 
    console.log('-------------------------')
    console.log('a' < 'b') // true
    console.log('aa' < 'ab') // true
    console.log('aa' < 'aac') // true
    console.log('-------------------------')

逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true结果才为true	一假则假
丨丨	逻辑或	或者	符号两边有一个true就为true	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

 <script>
    console.log(true && true)//true
    console.log(true && false)//false
    console.log(true || false)//true
    console.log(false || false)//false
    console.log(!true)//false
    console.log(!false)//true

    let num = 6
    console.log(num > 5 && num < 8)//true
  </script>

运算符优先级

语句

表达式和语句

表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。(简单理解表达式就是一个式子)

语句是一段可以执行的代码。(比如： prompt() 可以弹出一个输入框)

分支语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构

有的时候要根据条件选择执行代码，这种就叫分支结构

某段代码被重复执行，就叫循环结构

if分支

if语句有三种使用：单分支、双分支、多分支

单分支

 <script>
    let score = +prompt('请输入分数')
    if (score >= 700) {
      console.log('有点东西')
    }
    if (score < 700) {
      console.log('low的一')
    }
  </script>

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做

双分支

<script>
    let admin =  prompt('请输入用户名')
    let password = prompt('请输入密码')
    if (admin === '王德发' && password === '991201') {
      alert('登陆成功')
    }
    else {
      alert('用户名或密码错误') 
    }
  </script>

判断是否是闰年的案例

 <script>
    let year = +prompt('请输入年份')
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert(`${year}是闰年`)
    }
    else {
      alert(`${year}不是是闰年`)
    }
  </script>

多分支

先判断条件1，若满足条件1就执行代码1，其他不执行

若不满足则向下判断条件2，满足条件2执行代码2，其他不执行

若依然不满足继续往下判断，依次类推

若以上条件都不满足，执行else里的代码n

 <script>
    let grades = +prompt('请输入你的成绩')
    if (grades > 100 || grades < 0) {
      alert('再瞎写就0分')
    } else if (grades >= 90) {
      alert('A')
    } else if (grades >= 80) {
      alert('B')
    } else if (grades >= 70) {
      alert('C')
    } else if (grades >= 60) {
      alert('D')
    } else if (grades < 60) {
      alert('E')
    }
  </script>

三元运算符

其实是比 if 双分支更简单的写法，可以使用 三元表达式

语法:

条件 ? 满足条件执行代码1 : 不满足条件执行代码2

<script>
    let sum = 3 < 5 ? 3 : 5
    console.log(sum);
  </script>

求2个数最大值案例

<script>
    let num = +prompt('请输入一个数')
    let num2 = +prompt('请再输入一个数')
    num > num2 ? console.log(`最大值是${num}`) : console.log(`最大值是${num2}`)
  </script>

求3个数最大值案例

<script>
    let num = +prompt('请输入一个数')
    let num2 = +prompt('请输入二个数')
    let num3 = +prompt('请输入三个数')
    let res = num > num2 ? num : num2
    res = res > num3 ? res : num3
    console.log(res)
  </script>

数字补0案例

 <script>
    let num = prompt('请输入一个数')
    num = num < 10 ? 0 + num : num
    console.log(num)
  </script>

switch语句

找到跟小括号里数据全等的case值，并执行里面对应的代码

若没有全等 === 的则执行default里的代码

例：数据若跟值2全等，则执行代码2

注意事项:

1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用 没有break会造成case穿透

 <script>
    let sbuject = +prompt('请输入选择的课程:1-前端  2-java   3-测试   4-ui')
    switch (sbuject) {
      case 1:
        console.log('恭喜你选择了前端')
        break
      case 2:
        console.log('恭喜你选择了java')
        break
      case 3:
        console.log('恭喜你选择了测试')
        break
      case 4:
        console.log('恭喜你选择了ui')
        break
      default:
        console.log('不学习要进厂打螺丝吗?')

    }
  </script>

case穿透案例

<script>
    let month = +prompt('请输入月份')
    switch (month) {
      case 3:
      case 4:
      case 5:
        alert('春')
        break
      case 6:
      case 7:
      case 8:
        alert('夏')
        break
      case 9:
      case 10:
      case 11:
        alert('秋')
        break
      case 12:
      case 1:
      case 2:
        alert('冬')
        break
      default:
        alert('你是正常人吗?')
    }
  </script>

简易计算器案例

<script>
    let num1 = +prompt('请输入第一个数字')
    let num2 = +prompt('请输入第二个数字')
    let sp = prompt('请输入+ - * / 中的一个')
    switch (sp) {
      case '+':
        alert(`这两个数的加法操作是${num1 + num2}`)
        break
      case '-':
        alert(`这两个数的减法操作是${num1 - num2}`)
        break
      case '*':
        alert(`这两个数的乘法操作是${num1 * num2}`)
        break
      case '/':
        alert(`这两个数的除法操作是${num1 / num2}`)
        break
      default:
        alert('请输入正确的符号')
    }

循环

while循环

跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

循环三要素:

1.变量起始值

2.终止条件(没有终止条件，循环会一直执行，造成死循环)

3.变量变化量（用自增或者自减)

循环案例

<script>
   /*  //第一题  打印0-20之间的整数, 将每个数输出到控制台
    /*   let i = 0
      while (i <= 20) {
        console.log(i)
        i++
      } */
//第二题  计算1-1000之间的和
    /*  let i = 1
     let num = 0
     while (i <= 1000) {
       num = i + num
       i++
     }
     console.log(num) */
//第三题  打印 100-200之间,可以被6整除的数字
    /*   let i = 100
      while (i <= 200) {
        if (i % 6 === 0) {
          console.log(i)
        }
        i++
      } */
//第四题  用户输入一个数，  计算 1 到这个数的和。 
    /*  let num = +prompt('请输入一个数')
     let q = 1
     let i = 0
     while (q <= num) {
       i = q + i
       q++
     }
     console.log(i) */ 

  </script>

循环退出

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue

break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

页面弹框案例

 <script>
    while (true) {
      let str = prompt('你爱我吗')
      if (str === '爱')
        break
    }
  </script>

简易ATM机案例

<script>
    let money = 0
    while (true) {
      let re = +prompt(`
      请选择操作
      1.存钱
      2.取钱
      3.查看余额
      4.退出
      `)
      if (re === 4) {
        break
      }
      switch (re) {
        case 1:
          let cun = +prompt('请输入存款金额')
          money = money + cun
          break
        case 2:
          let qu = +prompt('请输入取款金额')
          money = money - qu
          break
        case 3:
          alert(`银行卡余额为${money}`)
          break
      }
    }
  </script>

  

if 多分支和switch的区别

1. 共同点

   • 都能实现多分支选择， 多选1
   • 大部分情况下可以互换

2. 区别：

   • switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。

   • switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次

   • switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果

   • 结论：

     • 当分支比较少时，if…else语句执行效率高。
     • 当分支比较多时，switch语句执行效率高，而且结构更清晰。

最后是原图(●ˇ∀ˇ●)