JavaScript if 条件判断语法与真值表详解

结果或目标：掌握流程控制

编写代码时，常需根据数据的不同状态执行不同逻辑。JavaScript 提供了完善的条件语句体系，从基础的单分支判断到多路分支选择，确保程序能准确响应各种运行环境。

准备条件：理解基础语法

JavaScript 主要提供以下四种条件语句：

• if 语句：仅当指定条件为 true 时执行代码。
• if...else 语句：条件为 true 执行一段代码，否则执行另一段。
• if...else if....else 语句：用于在多个代码块中选择一个执行。
• switch 语句：同样用于从多个代码块中选择一个执行，适合固定值的精确匹配。

真实操作顺序：if 语句详解

第1步：使用基本 if 语句

目的：满足单一条件时执行特定逻辑。

入口/语法：必须使用小写 if，大写会导致错误。

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

示例：时间小于 20:00 时生成问候语。

let time = 18;
if (time < 20) {
  let x = "Good day";
}

第2步：扩展为 if...else 语句

目的：提供条件的“否则”分支，覆盖所有可能性。

if (time < 20) {
  x = "Good day";
} else {
  x = "Good evening";
}

第3步：处理多条件分支 if...else if...else

目的：在多组互斥条件中选择其一。

if (time < 10) {
  x = "Good morning";
} else if (time < 20) {
  x = "Good day";
} else {
  x = "Good evening";
}

完成判断：理解真值表与隐式转换

在 JavaScript 中，if() 括号内的表达式会被自动转换为布尔值。这是许多新手容易混淆的点。

1. 布尔变量

true 为真，false 为假。

2. 数字类型

非 0 且非 NaN 的数字视为真；0 或 NaN 视为假。注意：负数也是真值。

var i = -1;
if (i) {
  alert('here'); // 会弹出，因为 -1 是非零数字
} else {
  alert('test is ok!');
}

3. 字符串与对象

字符串：非空串视为真，空串 "" 视为假。

对象：非 null 对象视为真，null 或 undefined 视为假。

4. 简化写法

由于上述特性，检查变量是否为“假值”（null, undefined, 0, "", false）可简化为：

if (!str) {
  // do something when str is falsy
}

排错提示：对于 NaN，不能用相等判断，需用 isNaN() 函数。例如：if (isNaN(a)) { ... }。

简要总结：代码优化技巧

为了保持代码简洁（如 UglifyJS 等工具所做的优化），可采用以下技巧：

1. 三元运算符

将简单的 if-else 赋值压缩为一行：

// 原始写法
if (foo) bar(); else baz();
// 简化后
foo ? bar() : baz();

2. 逻辑短路运算符

利用 && 和 || 的求值特性简化判断：

if (foo) bar();  // 等价于 foo && bar();
if (!foo) bar(); // 等价于 foo || bar();

3. 属性查找优化

通过对象键值对映射简化多重 if 判断：

function getAttr(el, attrName) {
  var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
  // 若 attrName 是 'for'，则获取到 'htmlFor'；否则返回原值
}

4. DOM 元素存在性判断

判断元素是否存在以防止报错：

if (document.getElementById("elementId")) {
  // 元素存在
}