JavaScript分支结构语句

JS中的分支结构语句

• JS 代码应该从上到下的执行

• 分支结构语句：当执行到某一部分的时候，根据条件来选择是否执行某段代码

JS 中的条件分支语句 - if

​ 有四种书写方式

if 分支

• if 语句
  • if (条件) { 代码 } - 单分支
  • 语法：if (条件) { 代码 }
  • 只要条件满足就执行 {} 里面的代码，只要条件不满足就不执行 {} 里面的代码
    • 满足：条件为 true
    • 不满足：条件为 false

	var age = 16
    // 因为 age >= 18 得到的结果是 false
    // 所以 {} 里面的代码不会执行
    if (age >= 18) {
      console.log('在网吧上网')
    }

• if … else 语句
  • if (条件) { 条件成立就执行 } else { 条件不成立就执行 } - 双分支
  • 语法：if (条件) { 条件成立就执行 } else { 条件不成立就执行 }
  • 条件满足执行 if 后面的 {} 里面的代码，条件不满足就执行 else 后面的 {} 里面的代码
    • 两个条件必定会执行一个

	var num = 203
    if (10 < num && num < 100) {
      console.log(num + ' 是在 10 ~ 100 之间')
    } else {
      console.log(num + ' 不是在 10 ~ 100 之间')
    }

	var age = 16
    if (age >= 18) {
      console.log('去网吧上网')
    } else {
      console.log('在家里上网')
    }

	 /*
    	闰年：
        公历年数是4的倍数，且不是100的倍数，为普通闰年
        即：year % 4 === 0 && year / 100 !== 0

        公历年数是整100的倍数，且是400的倍数，为世纪闰年
        即：year % 400 === 0
    */
	var year = prompt('请输入年份')

    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert(year + ' 是闰年')
    } else {
      alert(year + ' 是平年')
    }

• 拓展：三元（三目）运算符
  • 对于 if … else 语句的简写，只能简写 if … else 语句
  • 语法：条件判断 ? 条件成立就执行 : 条件不成立就执行
  • 严格的语法规范：两个符号，分成三段
  • 三元运算符的符号规则就是 ? 和 ：

	var age = 15
    age >= 18 ? console.log('成年') : console.log('未成年')	// 未成年

• if … else if 语句
  • if (条件1) { 条件1满足就执行 } else if (条件2) { 条件2满足就执行 } … - 多分支
  • 语法：if (条件1) { 条件1满足就执行 } else if (条件2) { 条件2满足就执行 } …
  • 从第一个条件开始，哪一个条件满足了，就执行哪一个条件后面的 {} 里面的代码，前面的条件满足了，后面的条件就全部不管了，直接跳过

	var age = 2
    if (age >= 23) {
      console.log('我可以结婚了')
    } else if (age >= 14) {
      console.log('我可以谈恋爱了')
    } else if (age >= 6) {
      console.log('可以和女同学坐同桌')
    }

• if … else if … else 语句
  • if (条件) { 成立就执行 } else if (条件2) { 条件2 成立就执行 } … else {} - 多分支
  • 语法：if (条件) { 成立就执行 } else if (条件2) { 条件2 成立就执行 } … else {}
  • 从第一个条件开始，哪一个条件满足了，就执行哪一个条件后面的 {} 里面的代码
    • 所有的条件都不满时，就执行 else 后面 {} 里面的代码
    • 前面的条件满足了，后面的条件就全部都不管了，直接跳过

	var age = 5
    if (age >= 23) {
      console.log('我可以结婚了')
    } else if (age >= 14) {
      console.log('我可以谈恋爱了')
    } else if (age >= 6) {
      console.log('可以和女同学坐同桌')
    } else {
      console.log('只能在家和小姨玩')
    }

• 拓展：和页面进行一个小小的交互
  • 语法：prompt(‘提示的文本内容’)
  • 作用：是在浏览器弹出一个输入框，小括号里面写的是一个提示的文本内容
  • 返回值：用户在文本框里面输入的内容
  • 注意：从页面获取到的内容是一个字符串格式
    • 如果你要进行加法运算，要先记得转换一下数值类型

	// prompt 会弹出一个输入框让用户输入内容
    // result 接收的就是用户输入的内容
    var result = prompt('请输入你的银行存款')

    // 判断如果你的银行存款 > 十万, 咱俩可以聊会天
    // 判断如果你的银行存款 < 十万, 那么我还有事不好意思
    if (result >= 100000) {
      alert('hello nice to meet you!')
    } else {
      alert('我还有事, 先走了, 不好意思')
    }

• vscode

  1. chinese 中文插件
  2. Bracket Pair Colorizer 括号出现颜色区分
  3. comment translate 翻译插件
  4. one dark pro 主题插件
  5. open in browser 在浏览器打开
  6. vscode-icon 编辑器图标插件

• 快捷键

  1. 选中相同的内容 ctrl + d
  2. 整体上移一行 alt + 上箭头
  3. 整体下移一行 alt + 下箭头

• 代码段

  1. 左下角齿轮 -> 用户代码片段 -> 新建全局代码片段 -> 自己写一个名字 -> 回车

	"Print to console": {
    	"scope": "javascript,typescript", // 表示在 js 文件和 ts 文件生效
        "prefix": "abc", // 你的快捷输入文本
        "body": [ // 就是你按 tab 键会出现的内容
        	"console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }

JS中的条件分支语句 - switch

​ switch语句也是我们条件分支语句的一种

switch语句

• 语法：

/*
	switch (要判断的变量) {
    	case  情况一 :
        	情况一满足时执行的代码
       		break
    	case  情况二 :
        	情况二满足时执行的代码
        	break
    	default :
        	所有情况都不满足时执行的代码
	}
*/

	// 准备一个变量
    var num = 1
    // switch 语法
    switch (num) {
      case 1:
        console.log('你输入的是 1 这个数字')
        break
      case 2:
        console.log('你输入的是 2 这个数字')
        break
      case 3:
        console.log('你输入的是 3 这个数字')
        break
      default:
        console.log('所有条件都不满足')
    }
    console.log('后续代码继续执行')

• 解释单词

  • switch 开关，道岔
  • case 情况，方案
  • default 默认
  • break 断开，断点

• 注意

  • 小括号里面直接写要判断的变量就可以，不需要符号
  • case 后面一般的情况不能写范围的比较，只能是全等（===）的比较，但是
  • 每一个 case 后面的 break 都要写上，如果不写，会发生一个穿透的情况
    • 穿透：就是不管下一个 case 是不是满足，都会执行下一个 case 的代码
  • 向下穿透的效果，会从第一个满足的 case 开始向下穿透，知道遇到一个break为止
  • default 可以写，也可以不写
    • 要是写了default，那么所有条件都不满足时就有代码执行
    • 要是不写default，那么所有条件都不满足时就没有代码执行
  • 出现下面情况时，可以写范围的比较

	var score = prompt('请输入成绩') - 0
    switch (true) {
        case score < 60: 
            alert('不及格')
            break 
        case score > 60:
            alert('及格')
            break
    }

• if 语句和 switch 语句的区别

  1. if 条件判断可以判断范围
     • 当你需要单位判断的时候，推荐使用 if 语句
  2. switch 只能准确判断
     • 当你需要准确判断，并且判断的还比较多的时候，推荐使用 switch 语句

• 小案例1

	/*
      根据一个 1 ~ 12 的数字, 给出反馈, 当月又多少天
        通过一个年份的变量来确定 2 月是 28 天还是 29 天
    */

    // 1. 准备一个数字
    var month = prompt('请输入一个 1 ~ 12 之间的数字表示月份')
    var year = prompt('请输入一个四位数字作为年份使用') - 0

    // 非加法的数学运算可以转换成数字
    // 减 0 不改变原始大小
    month = month - 0

    // 利用 switch 穿透效果来写
    switch (month) {
      case 1:
      case 3:
      case 5:
      case 7:
      case 8:
      case 10:
      case 12:
        console.log(month + ' 月有 31 天')
        break
      case 4:
      case 6:
      case 9:
      case 11:
        console.log(month + ' 月有 30 天')
        break
      case 2:
       // 通过 year 来判断是平年还是闰年
        if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
          console.log(month + ' 月有 29 天')
        } else {
          console.log(month + ' 月有 28 天')
        }
        break
      default:
        console.log('请输入一个 1 ~ 12 之间的数字')
    }

• 小案列2

	/*
      作业一： 根据用户输入的数字判断成绩
      1. 需要接收一个用户输入的数字
      2. 根据输入的数字进行判断, 给一个反馈
      
      用 switch 进行判断
      分析以下数字
        100
        9x
        8x
        7x
        6x
        5x
        4x
      可以把数字除了 100 以外的 / 10 取整
    */
    
    // 1. 接收用户输入的数字
     var n = parseInt(score / 10)
   
	// 2. 开始进行判断
    switch (n) {
      case 10:
      case 9:
        alert('成绩为 A')
        break
      case 8:
        alert('成绩为 B')
        break
      case 7:
        alert('成绩为 C')
        break
      case 6:
        alert('成绩为 D')
        break
      default:
        alert('成绩为 E')
    }    

• 小案列3：

	 /*
      作业一： 根据用户输入的数字判断成绩
      1. 需要接收一个用户输入的数字
      
      用 if 进行判断
    */
    
    // 1. 接收用户输入的数字
    var score = prompt('请输入一个 0 ~ 100 之间的数字') - 0

    // 2. 开始进行判断
    if (score >= 90) {
      alert('成绩为 A')
    } else if (score >= 80) {
      alert('成绩为 B')
    } else if (score >= 70) {
      alert('成绩为 C')
    } else if (score >= 60) {
      alert('成绩为 D')
    } else {
      alert('成绩为 E')
    }