前面学习了基础的变数与运算子的使用，这些基础往往是非常枯燥乏味的，还没有与电脑有更进一步的互动，所以感受不到程序语言的魅力，而今天学习的条件判断式就可以开始与电脑进行些微的互动！

什麽是条件判断式？

就「条件判断」字面上的意思，由我们设定条件，让电脑帮我们判断是否执行後续程序码。

判断流程图

在写条件判断式之前，通常会先思考这个条件设下的流程图要怎麽规划！

例如，判断用户资料是否有成年如下：

有的人喜欢在脑中规划，有的人喜欢着手画出来，也有的人喜欢利用线上软件进行规划，只要能让自己规划出流程、整理出思绪的都是好方法。

通常为了让大家都能一下就看得懂，流程图的形状也都有定义，当然如果只有你自己看，你想要什麽形状就什麽形状。

我在这里推荐一个可以制作流程图的线上网站 Whimsical，至於如何使用，就自己好好摸索一下就懂了，我就不再这多加着墨了。

if 条件判断式结构

想好流程图後，接着就是实践了！
if 条件判断式结构 if ( 条件 ) { 达成条件执行这段程序码 } else { 否则执行 else 後的程序码 } 就如上面例子：

const age = 27;

if (age >= 18 /* () 内写判断条件 */) {
  /* 当符合条件就会执行这段 {} 内的程序码 */
  console.log('你成年了！享受吧～')
} else {
  /* 否则就会执行 else 後，这段 {} 内的程序码 */
  console.log('你未成年不能进入！')
}

简化方式

当你的判断条件执行的结构非常简单，执行程序只有单纯的一行，可以省略 {}
以上面作为范例：

const age = 27;

if (age >= 18)
  console.log('你成年了！享受吧～') // 只有单纯一行可以省略 {}
else
  console.log('你未成年不能进入！') // 只有单纯一行可以省略 {}
  
/* 甚至更简化 */

if (age >= 18) console.log('你成年了！享受吧～') // 只有单纯一行可以省略 {}
else console.log('你未成年不能进入！') // 只有单纯一行可以省略 {}

当然不推荐贸然使用，一切依照可读性为准！

多个条件判断式

除了判断是否成年外，也能使用 else if () 来达成多个条件来判断处在哪个年龄阶段：

const age = 27;
let ageGrades = '';

if (age >= 65 /* () 内写判断条件 */) {
  ageGrades = '老年';
} else if (age < 65 && age >= 18) {
  ageGrades = '青壮年';
} else {
  ageGrades = '幼年';
}

console.log( ageGrades ) // "青壮年"

此外不一定要写 else

有时候条件判断式只是想判断是否有达成条件，没达成条件不会执行程序码，就可以省略 else 後面这段，如：

if (ageGrades === '青壮年') alert('你现在正处在人生最颠峰的阶段～加油！') 

三元运算子（条件运算子）

这个跟 if 条件判断式非常相似，三元运算子结构 ( 条件 ) ? 达成条件回传这段 : 未达成回传这段，需注意 它是运算子！表达式会回传值！所以很常直接进行判断赋值。如下：

什麽是表达式？ 表达式会自动回传结果，最常见的就是运算子
除了表达式还有别的吗？ 还有陈述式，与表达式相反，不会回传结果，主要是执行程序码的片段，例如：if 条件判断式

const age = 27;

let adult = (age >= 18) ? true : false; // 这是为了展示条件判断後直接赋值

adult ? console.log('你成年了！享受吧～') : console.log('你未成年不能进入！'); // "你成年了！享受吧～"

/*  当然这段其实可以直接简化成  */
(age >= 18) ? console.log('你成年了！享受吧～') : console.log('你未成年不能进入！'); // "你成年了！享受吧～"

switch 条件判断式

switch 条件判断式，非常适合处理条件明确，判断流程长的条件判断式了，这边就使用 008 天 重新认识 JavaScript 所举的例子吧！
一年有 12 个月，4个季节，从我们熟知的 if 慢慢优化到 switch：

使用 if 条件判断式

这是个非常直觉的用法！

if ( month >= 1 && month <=3 ) {
  console.log('春天');
} else if ( month >= 4 && month <=6 ) {
  console.log('夏天');
} else if ( month >= 7 && month <=9 ) {
  console.log('秋天');
} else if ( month >= 10 && month <=12 ) {
  console.log('冬天');
} else {
  console.log('月份错误');
}

但会发现判断条件有点长，容易写错不好维护，
於是简化条件，先定义季节代号的变数，并利用 Math.ceil() 小数点无条件进位的方法简化。
这样利用变数管理，更易於维护，也比较不容易写错条件导致 bug。

const seasonType = Math.ceil( month / 3 );

if ( seasonType === 1) {
  console.log('春天');
} else if ( seasonType === 2) {
  console.log('夏天');
} else if ( seasonType === 3) {
  console.log('秋天');
} else if ( seasonType === 4) {
  console.log('冬天');
} else {
  console.log('月份错误');
}

但这也是有缺点，判断式写太长，效率会不太好，还有更好的优化方法，那就是使用我们的 switch 条件判断

使用 switch 优化

switch 的语法是：

/* switch 是关键词 */
switch ( Math.ceil( month / 3 ) /* 输入值 */ ) {
  case 1: // 比对值
    console.log('春天'); // 输入值 与 比对值 "全等"才会执行这段
    break; // 中断判断跳出
  case 2:
    console.log('夏天');
    break;
  case 3:
    console.log('秋天');
    break;
  case 4:
    console.log('冬天');
    break;
  default:
    console.log('月份错误');
    break;
}

是不是更简单清楚明了了呢！

switch 重点：

1. 输入值可以是变数，也可以是表达式，只要得出的值有办法对应比对值就可以了
2. 输入值 与 比对值必须全等才行，属於严格比对！
3. break 通常情况下会加上去，不然判断不会自己中断，会从比对成功的程序码一路执行下去，直到碰到 break
4. default 主要功能是，当条件都没办法达成时，会执行这段，与 else 一样不一定要添加，一个 switch 只能使用一个

总结

人是有惰性的，不常使用的语法有时候会忘记！
以前的我就不常使用 switch，心想反正 if 就能用了，我就懒，後来仔细想想，既然处理的事情差不多，那它存在一定有它的意义在，在好奇心驱使下，去查阅了 if 与 switch 有什麽不同！查了才发现～原来在判断流程长的时候，使用 switch 的效能会比使用 if 还来的好，也更容易维护，於是能使用 switch 的时候，我都尽量使用，能简化不失阅读性，就尽量简化，把工程师的懒，发挥到极致！

参考资料

• 008 天 重新认识 JavaScript