正确判断 JavaScript 中变量是否为 `undefined` 的深度解析与最佳实践
1. 什么是 `undefined`？
在 JavaScript 中，`undefined` 是一个原始值，表示变量未被赋值。它与 `null` 不同，`null` 表示“无值”，而 `undefined` 表示“未定义”或“未初始化”。
例如：
let x;
console.log(x); // 输出: undefined
2. 常见判断方式及其隐患
开发者常用以下两种方式判断变量是否为 `undefined`：
typeof variable === 'undefined'variable === undefined
2.1 使用 typeof 判断
typeof 操作符返回一个字符串，表示变量的类型。对于未声明的变量，它不会抛出错误。
if (typeof myVar === 'undefined') {
console.log('myVar is undefined or not declared');
}
优点：
适用于未声明的变量，不会抛出错误。
缺点：
语法上不够直观。
2.2 使用 === undefined 判断
直接比较变量是否等于 `undefined`：
if (myVar === undefined) {
console.log('myVar is undefined');
}
优点：
语法简洁直观。
缺点：
如果变量未声明，会抛出 ReferenceError。在非严格模式下，`undefined` 可以被重写，导致判断失效。
3. `undefined` 可被重写的隐患
在 ECMAScript 5 之前，`undefined` 并不是一个只读属性，开发者可以修改其值：
undefined = 123;
let x;
console.log(x === undefined); // 输出: false
因此，直接使用 variable === undefined 在非严格模式或旧版浏览器中是不安全的。
4. 安全判断的最佳实践
为了确保判断的准确性和安全性，推荐以下方式：
使用 typeof 判断未声明变量。在严格模式下开发，防止 `undefined` 被篡改。使用 void 0 替代 `undefined` 进行比较。
4.1 使用 void 0
void 0 表达式始终返回 `undefined`，不会受到变量污染的影响。
if (variable === void 0) {
console.log('variable is undefined');
}
4.2 在函数参数中处理默认值
ES6 提供了默认参数功能，可以优雅地处理 `undefined` 参数：
function greet(name = 'Guest') {
console.log(`Hello, ${name}`);
}
greet(); // 输出: Hello, Guest
greet(undefined); // 输出: Hello, Guest
greet('Alice'); // 输出: Hello, Alice
5. 判断对象属性是否为 `undefined`
判断对象属性是否为 `undefined` 时，需注意属性是否存在：
const obj = { name: undefined };
console.log(obj.name === undefined); // true
console.log('name' in obj); // true
结论：
obj.prop === undefined 只能判断属性值是否为 `undefined`。使用 'prop' in obj 可判断属性是否存在。
6. 判断全局变量是否为 `undefined`
全局变量可能被其他脚本修改或污染，因此判断时应格外小心。
if (typeof globalVar === 'undefined') {
// 安全地处理未定义的全局变量
}
7. 总结性对比表格
判断方式适用场景是否安全是否推荐typeof var === 'undefined'变量可能未声明时是✅var === undefined变量已声明但可能为 undefined否（非严格模式）⚠️var === void 0需要绝对安全的比较是✅
8. 流程图：判断变量是否为 undefined
graph TD
A[开始判断变量是否为 undefined] --> B{变量是否已声明?}
B -->|是| C{是否在严格模式下?}
C -->|是| D[使用 === void 0]
C -->|否| E[使用 typeof === 'undefined']
B -->|否| E