每天3小时学前端之JS-第10天-条件语句-switch语句

此系列体验视频教程

switch语句

switch语句也是用来控制多分支流程的条件语句，和if最大的不同在于，if一般用某个范围作为条件，而switch一般以某个点作为条件。

基本语法

switch (用来匹配的表达式) {
  case 各分支表达式:
    分支语句...
    break;
  case 各分支表达式:
    分支语句...
    break;
  default:
    默认分支语句...
    break;
}

用来匹配的表达式的值会跟各分支表达式进行比对，满足则执行相应分支代码。
break语句不能少，否则下面分支会不进行判断直接执行
另外加上break的switch和if一样，即使有多个可以匹配的分支，也只能进入一个分支。

var fruit = 'apple'

switch (fruit) {
  case 'tomato':
    console.log('番茄！');
    break;
  case 'apple':
    console.log('苹果！');
    break;
  default:
    console.log('默认');
}

// 苹果！

全等匹配

匹配规则采用的是全等===，而不是==，这意味着比较时不会发生类型转换。

var n = '1'
switch (n) {
  case 1: 
    console.log('整数1');
    break
  case 1.0: 
    console.log('小数1.0');
    break
  case '1': 
    console.log('字符串1');
}

default位置无关

var n = 2
switch (n) {
  case 1: 
    console.log('整数1');
    break
  default:
    console.log('默认');
    break; // 不在最下面的`default`记住也要加`break`
  case 1.0: 
    console.log('小数1.0');
    break
}

// 默认

case语句的合并

具有相同功能多个的case语句可以进行合并，等同于if语句中的或

var day = 2
    
switch(day) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log('工作日！');
    break;
  case 6:
  case 7: 
    console.log('休息日！');
    break;
  default : 
    console.log('超出范围了！');
}

switch语句的嵌套

var day = 1
var meal = 'supper'

switch(day) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log('工作日！');
    switch (meal) {
      case 'breakfast': 
        console.log('鸡蛋+牛奶！');
        break;
      case 'lunch': 
        console.log('快餐！');
        break;
      case 'supper': 
        console.log('套餐！');
        break;
    }
    break;
  case 6:
  case 7: 
    console.log('休息日！');
    switch (meal) {
      case 'breakfase': 
        console.log('豆浆+油条！');
        break;
      case 'lunch': 
        console.log('做饭！');
        break;
      case 'supper': 
        console.log('吃大餐！');
        break;
    }
    break;
  default : 
    console.log('超出范围了！');
}

switch语句与对象属性

可以使用对象属性实现switch功能，从而简化代码量

var meal = 'breakfast'

var obj = {
  breakfast: '鸡蛋+牛奶！',
  lunch: '快餐！',
  supper: '套餐！'
}
console.log(obj[meal] ? obj[meal] : '不是饭点！');

练习

根据年份和月份打印当月的天数

var year = 2000
var month = 2
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
  console.log('31天');
  break
case 4:
case 6:
case 9:
case 11:
  console.log('30天');
  break
case 2: 
  // 非世纪年，能被4整除，不能被100整除的为闰年。
  // 世纪年，能被400整除的，为闰年。 
  // 用if实现
  if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
    console.log('29天');
  } else {
    console.log('28天');
  }

  // 用switch实现
  switch ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
    case true: 
      console.log('29天');
      break;
    default: 
      console.log('28天');
  }
  break
}

作业

在提示的输入框中输入8位的日期数字，然后判断是一年中的第几天

提示：需要用%和/处理输入的8位日期字符串，从而获取到年、月、日。需要进行天数的累计。需要判断是否闰年来确定2月的天数。

// var dateStr = prompt('请输入8位日期')
var dateStr = '20160316'