JavaScript 条件判断 if 语句

生活中的很多决定都要看情况。成绩到 60 分算及格，超过 90 分算优秀。程序也一样，需要根据条件做出不同的处理。if 语句就是 JavaScript 里最常用的条件判断工具，这篇把它讲透。

条件判断的根基是布尔值，上一篇讲过比较运算的结果就是 true 或 false，正是这个结果决定 if 走哪个分支。对比较运算还不熟的话，可以先看JavaScript 布尔值与比较运算。

if 基本语法

if 后面跟一个括号，括号里写条件，条件为 true 就执行后面花括号里的代码，为 false 就跳过。

if (条件) {
  // 条件为 true 时执行的代码
}

比如判断一个分数是否及格。

const score = 85;

if (score >= 60) {
  console.log('及格了');
}

条件为 true 就输出提示，为 false 就什么都不做。

if else 二选一

只有”及格”的判断还不够，分数不到 60 时希望也有提示。加上 else，条件为 false 时执行 else 后面的代码。

const score = 45;

if (score >= 60) {
  console.log('及格了');
} else {
  console.log('不及格，再加油');
}

if else 保证两个分支必走一个，且只有一个分支会被执行。

if else if else 多选一

三个及以上的情况，用 else if 串联。执行流程是从上到下逐个判断，遇到第一个为 true 的条件就执行它，然后跳过剩余所有分支。

const score = 78;
let level = '';

if (score >= 90) {
  level = '优秀';
} else if (score >= 80) {
  level = '良好';
} else if (score >= 60) {
  level = '及格';
} else {
  level = '不及格';
}

console.log(level); // 输出 及格

score 是 78。第一个条件 78 >= 90 为 false，第二个条件 78 >= 80 为 false，第三个条件 78 >= 60 为 true，于是执行第三个分支，后面的不再判断。

如果所有条件都不满足，就执行最后的 else。注意分支顺序很重要，必须从分数高到低排列。如果先写 score >= 60，那 90 分以上的也会先命中及格分支，输出就错了。

条件会先转换成布尔值

if 括号里的条件不一定非要比较运算的结果。任何值放进去，都会先被转换成一个布尔值，再决定走哪个分支。

只有六个值会被当作假，称为假值，包括 false、0、空字符串 ‘’、null、undefined、NaN。其余所有值都是真值，比如字符串 ‘0’、空数组 []、空对象 {} 和负数。

if ('0') {
  console.log('字符串 0 是真值'); // 会输出
}

if ([]) {
  console.log('空数组是真值'); // 会输出
}

if ({}) {
  console.log('空对象是真值'); // 会输出
}

if (0) {
  console.log('不会输出');
}

if (NaN) {
  console.log('不会输出');
}

这个特性很有用。比如判断用户有没有输入内容，直接判断字符串本身就行，空字符串是假值，判断为 false，正好表示没输入。

const input = '';

if (input) {
  console.log('有输入');
} else {
  console.log('没有输入');
}

三元运算符

有一种简单场景，根据条件在两个值里选一个。这时可以用三元运算符，它是 if else 的简写形式。

const age = 20;
const type = age >= 18 ? '成年人' : '未成年人';

console.log(type); // 输出 成年人

写法是 条件 ? 值A : 值B，条件为 true 取值A，为 false 取值B。给变量赋值时用起来很简洁。但逻辑一复杂就不要硬用三元运算符，可读性会变差，老老实实用 if else 更清楚。

// 三个以上分支，还是 if 更清楚
let tip = '';
if (age >= 18) {
  tip = '成年人';
} else if (age >= 6) {
  tip = '少年';
} else {
  tip = '儿童';
}

小结

if 语句根据条件选择执行哪段代码，else if 串联多个分支，执行时从上到下命中第一个为 true 的分支。
else 是可选的，表示所有条件都不满足时的兜底。
条件会被转换成布尔值，只有 false、0、’’、null、undefined、NaN 是假值，其余都是真值，包括 ‘0’、[]、{}。
三元运算符 条件 ? 值A : 值B 是简单的 if else 简写，适合简单赋值场景，复杂逻辑用 if。

JavaScript 布尔值与比较运算

JavaScript switch 语句