JavaScript 中如何优雅地判断变量是否存在？告别 `undefined` 和 `null` 的烦恼！309

各位前端好汉，大家好！我是你们的中文知识博主。
在我们的前端开发生涯中，是不是经常被 `TypeError: Cannot read properties of undefined (reading 'xxx')` 这种错误气得摔键盘？
尤其对于那些从 PHP 转向 JavaScript 的朋友，你可能会特别怀念 PHP 中那个简单粗暴但异常实用的 `isset()` 函数。它能轻松帮你判断一个变量是否已经设置并且不为 `null`。
那么问题来了，JavaScript 里有没有类似的“神器”呢？答案是：虽然没有一个函数名叫 `isset()`，但 JavaScript 提供了更强大、更细致、更优雅的方式来处理变量的存在性检查和安全取值！
今天，咱们就来一起深入探讨 JavaScript 中判断变量是否存在、是否为 `null` 或 `undefined`，以及如何避免那些恼人的运行时错误。

为什么我们需要判断变量“是否存在”？

JavaScript 是一种弱类型、动态语言，这带来了灵活性，但也意味着我们在处理数据时需要更加小心。一个变量可能因为多种原因而“不存在”或“无效”：

未声明的变量： 如果你尝试访问一个从未声明过的变量，JS 会直接抛出 `ReferenceError`。这是最严重的错误，会导致程序中断。
已声明但未赋值的变量： 变量会被自动赋值为 `undefined`。
被显式赋值为 `undefined` 或 `null` 的变量： 这通常表示数据缺失或无效。
对象属性不存在： 尝试访问一个对象上不存在的属性时，结果是 `undefined`，但并不会抛出 `ReferenceError` (除非你试图对这个 `undefined` 值继续取属性)。

在实际开发中，我们经常从 API 获取数据、处理用户输入或操作 DOM。这些数据往往是动态的、不可预测的，某个字段可能存在，也可能压根没有。如果不做判断就直接使用，轻则导致 UI 异常，重则使整个应用崩溃。

JavaScript 中判断变量存在的“基础三板斧”

虽然没有 `isset()`，但我们有其背后的基本原理。在 JavaScript 中，判断一个变量是否“存在”或“有效”，通常围绕着 `undefined` 和 `null` 这两个特殊值展开。

1. 使用 `typeof` 检查 `undefined`

`typeof` 运算符是检查一个变量是否为 `undefined` 的最基本方法，尤其适用于检查一个未经声明的变量或可能不存在的全局变量。

let myVar; // 声明但未赋值，值为 undefined
(typeof myVar); // "undefined"
let anotherVar = 123;
(typeof anotherVar); // "number"
// 尝试访问一个未声明的变量
// (typeof nonExistentVar); // 错误！不会在运行时报错，但会返回 "undefined"
if (typeof nonExistentVar === 'undefined') {
("nonExistentVar 确实不存在或者未赋值。");
}

注意： `typeof` 对于未声明的变量会返回 `"undefined"` 字符串，而不是抛出 `ReferenceError`，这使得它成为检查全局变量或模块作用域变量是否存在的安全方法。但对于局部作用域内未声明的变量，直接访问仍然会报错。

2. 检查 `null` 和 `undefined`

`null` 和 `undefined` 都表示“没有值”或“空”，但它们之间有细微的区别：

`undefined`：通常表示变量已声明但未赋值，或者对象属性不存在。
`null`：表示一个空值，通常由开发者显式赋值，意图是“这里没有对象”。

我们可以直接使用严格相等 `===` 或非严格相等 `==` 进行判断。

let val1; // undefined
let val2 = null;
let val3 = 0;
let val4 = "";
let val5 = "hello";
(val1 === undefined); // true
(val2 === null); // true
// 联合判断：使用 != null （非严格不等于 null）
// 这是一个非常常见的技巧，因为 null == undefined 为 true
// 所以 val != null 能够同时排除 null 和 undefined。
(val1 != null); // false (因为 val1 是 undefined，undefined == null 为 true)
(val2 != null); // false (因为 val2 是 null)
(val3 != null); // true (0 既不是 null 也不是 undefined)
(val4 != null); // true ("" 既不是 null 也不是 undefined)
(val5 != null); // true

使用 `!= null` 或 `== null` 是一个简洁的判断方式，能够同时覆盖 `null` 和 `undefined` 两种情况。

3. 警惕“假值”（Falsy Values）

在 JavaScript 中，除了 `false` 之外，还有一些值在布尔上下文中会被视为 `false`，我们称之为“假值” (Falsy Values)。它们包括：
`false`, `0`, `-0`, `0n` (BigInt zero), `""` (空字符串), `null`, `undefined`, `NaN`。
这意味着，如果你使用简单的 `if (variable)` 来判断变量是否存在或有值，你可能会误判。

let myData = 0;
if (myData) {
("myData 有值。"); // 不会执行，因为 0 是假值
} else {
("myData 是一个假值。"); // 输出
}
let emptyString = "";
if (emptyString) {
("emptyString 有值。"); // 不会执行，因为空字符串是假值
} else {
("emptyString 是一个假值。"); // 输出
}

所以，如果你想区分 `0` 或 `""` 这些合法值与 `null`/`undefined`，仅仅使用 `if (variable)` 是不够的。你需要更精确的判断。

现代 JavaScript 的“神器”：可选链 `?.` 和空值合并 `??`

JavaScript ES2020 引入了两个重量级操作符，极大地提升了我们处理变量存在性和默认值的优雅程度，它们是判断变量是否存在的“终极利器”。

1. 可选链操作符 (`?.`) - 安全访问嵌套属性

这是前端开发者梦寐以求的功能！当你想访问一个对象深层嵌套的属性时，再也不用写一堆 `if (obj && && )` 这样的判断了。
`?.` 操作符允许你安全地访问一个可能为 `null` 或 `undefined` 的对象的属性。如果链中的某个引用是 `null` 或 `undefined`，表达式会立即停止求值，并返回 `undefined`，而不会抛出错误。

const user = {
name: "张三",
address: {
city: "北京",
street: "中关村大街"
},
// phone: undefined // 假设 phone 属性可能不存在或为 undefined
};
(); // "张三"
(); // "北京"
// 以前的写法：
// const streetName = && ;
// (streetName); // "中关村大街"
// 使用 ?. 之后：
const streetName = user?.address?.street;
(streetName); // "中关村大街"
// 如果 address 不存在
const user2 = { name: "李四" };
// (); // TypeError: Cannot read properties of undefined
(user2?.address?.street); // undefined (安全返回)
// 访问不存在的 phone 属性
(user?.phone); // undefined
(user?.phone?.number); // undefined (进一步链式调用也不会报错)

可选链让我们的代码变得异常简洁和健壮，是处理不确定数据结构的首选方案。

2. 空值合并操作符 (`??`) - 精准设置默认值

`??` 操作符提供了一种为 `null` 或 `undefined` 值设置默认值的简洁方式。它和逻辑或 `||` 操作符很相似，但有一个关键的区别：

`||` 操作符：如果左侧操作数是任何假值（`false`, `0`, `""`, `null`, `undefined`, `NaN`），则返回右侧操作数。
`??` 操作符：只有当左侧操作数是 `null` 或 `undefined` 时，才返回右侧操作数。

这意味着，如果你想把 `0` 或 `""` 这些合法的值也保留下来，而不是被替换成默认值，`??` 是你的最佳选择。

let config1 = { theme: null };
let config2 = { theme: undefined };
let config3 = { theme: "dark" };
let config4 = { fontSize: 0 };
let config5 = { title: "" };
const defaultTheme = "light";
const defaultFontSize = 16;
const defaultTitle = "Untitled";
// 使用 || 操作符 (旧方式)
( || defaultTheme); // "light"
( || defaultTheme); // "light"
( || defaultTheme); // "dark"
( || defaultFontSize); // 16 (0 被视为假值，被替换了！)
( || defaultTitle); // "Untitled" (空字符串被替换了！)
// 使用 ?? 操作符 (新方式)
( ?? defaultTheme); // "light"
( ?? defaultTheme); // "light"
( ?? defaultTheme); // "dark"
( ?? defaultFontSize); // 0 (0 被保留了！)
( ?? defaultTitle); // "" (空字符串被保留了！)

`??` 操作符在处理用户配置、API 返回值等需要区分“没有值”和“有效但为假值”的场景下，尤其好用。

检查对象属性的“存在性”

当我们需要判断一个对象是否拥有某个属性时，除了直接访问然后看是否为 `undefined` 外，还有更精确的方法。

1. `in` 操作符

`in` 操作符可以检查一个属性是否存在于对象或其原型链上。

const myObject = {
a: 1,
b: undefined // b 属性存在，但值为 undefined
};
('a' in myObject); // true
('b' in myObject); // true (即使值为 undefined 也算存在)
('c' in myObject); // false
// 检查原型链上的属性
('toString' in myObject); // true (来自 )

2. `()`

`hasOwnProperty()` 方法会检查对象自身（而非原型链）是否拥有某个属性。这是判断对象“自己”是否拥有某个属性的最可靠方法。

const myObject = {
a: 1,
b: undefined
};
(('a')); // true
(('b')); // true
(('c')); // false
// 不检查原型链
(('toString')); // false

为了更安全地调用 `hasOwnProperty` (防止对象重写此方法)，通常推荐使用 `(obj, prop)`。

const myObjectWithOverride = {
name: "Test",
hasOwnProperty: 123 // 不小心重写了 hasOwnProperty
};
// ('name'); // 这会报错，因为 hasOwnProperty 现在是数字
((myObjectWithOverride, 'name')); // true (安全)

自定义一个“类 isset”的辅助函数？

如果你真的非常怀念 PHP 的 `isset()` 简洁性，也可以自己封装一个辅助函数。但要注意，JavaScript 的上下文与 PHP 不同，我们无法像 PHP 那样直接检查一个“变量名”是否被声明（会抛出 `ReferenceError`）。我们的辅助函数只能接收一个变量的值作为参数。

/
* 模拟 PHP 的 isset()
* 检查一个变量的值是否不是 null 且不是 undefined
* 注意：此函数不能直接检查一个未声明的变量名，只能检查已存在的变量的值或对象属性的值。
* 传入一个未声明的变量名会直接 ReferenceError。
*/
function jsIsset(value) {
return value !== null && typeof value !== 'undefined';
}
// 示例：
let a;
let b = null;
let c = 0;
let d = "";
let e = "hello";
(jsIsset(a)); // false
(jsIsset(b)); // false
(jsIsset(c)); // true (0 不是 null 也不是 undefined)
(jsIsset(d)); // true ("" 不是 null 也不是 undefined)
(jsIsset(e)); // true
const obj = { prop: 'value', emptyProp: undefined, nullProp: null };
(jsIsset()); // true
(jsIsset()); // false
(jsIsset()); // false
(jsIsset()); // false ( 的值是 undefined)
// (jsIsset(nonDeclaredVar)); // 这里会 ReferenceError，因为 nonDeclaredVar 没有声明

这个 `jsIsset` 函数可以帮助你在特定场景下，统一判断一个值是否“有效”（非 `null` 且非 `undefined`），但它不能替代可选链和空值合并在代码简洁性上的优势。

总结与最佳实践

你看，JavaScript 虽然没有一个名为 `isset()` 的函数，但它通过 `typeof`、严格相等、`?.`、`??` 以及 `hasOwnProperty` 等一系列操作符和方法，提供了更强大、更精细、更符合语言特性的方式来处理变量的存在性和取值。

最佳实践建议：

优先使用可选链 `?.` 和空值合并 `??`： 在现代 JavaScript 项目中，这是处理嵌套属性和设置默认值的最优雅、最推荐的方式。它们让代码更短、更易读、更健壮。
区分 `null` 和 `undefined`： 当你需要区分这两种“空”状态时，使用 `=== null` 和 `=== undefined` 进行精确判断。
利用 `!= null` (或 `== null`) 简洁判断： 如果你只关心一个值是否既不是 `null` 也不是 `undefined`，`value != null` 是一个非常简洁且常用的方法。
谨慎使用 `if (variable)`： 记住假值列表，当你需要区分 `0`、`""`、`false` 等与 `null`/`undefined` 时，不要只依赖布尔上下文。
使用 `typeof` 检查未声明的变量： 对于可能未声明的顶层变量（尤其是全局变量），`typeof variable === 'undefined'` 是最安全的检查方式。
使用 `()` 检查对象自有属性： 当你需要确保一个属性是对象自身的，而不是从原型链继承时，这是最可靠的方法。