在前端开发的江湖里摸爬滚打，谁没遇到过几次“Uncaught TypeError: Cannot read property 'xxx' of null/

以前，大家可Neng习惯用一大串的 `if ` 来保平安，或者简单粗暴地用 `if `。但随着ES6+语法的普及，工具箱里的武器越来越多了。今天咱们就来好好聊聊，在处理空值判断这件事上，除了老套的 `if else`，我们还Neng怎么玩？特别是那个让人又爱又恨的三目运算符，以及后来居上的“空值合并运算符”。

老当益壮的三目运算符

说到三目运算符，大家肯定不陌生。那个 `? :` 的组合，简直就是代码界的“压缩饼干”。原本需要五六行 `if-else` 才Neng说完的逻辑，它一行就Neng搞定。

比如我们要给一个用户名设置默认值：

// 传统的 if else 写法
let displayName;
if  {
    displayName = userName;
} else {
    displayName = "游客";
}

kan着是不是有点啰嗦？这时候三目运算符就派上用场了：

// 三目运算符写法
let displayName = userName ? userName : "游客";

瞬间清爽了不少有没有？这种写法在处理简单的条件判断时效率极高。而且现在的打包工具在压缩代码时也会自动把 `if-else` 转换成三目运算符的形式，毕竟省字符就是省流量啊。

不过三目运算符虽好，可不要“贪杯”哦。Ru果你写了层层嵌套的三目，比如 `a ? b ? c : d : e`，那过两周再回头kan这段代码，你可Neng连自己当初想表达什么dou忘了。所以简单逻辑用它，复杂逻辑还是老老实实写 `if` 吧，毕竟代码是写给人kan的，顺便给机器跑。

逻辑或的“双刃剑”效应

在三目运算符之外还有一个经常被用来Zuo默认值赋值的老伙计，那就是逻辑或 `||`。hen多新手朋友特别喜欢用它，因为写起来真的太短了。

let result = inputValue || "默认值";

这行代码的意思是：Ru果 `inputValue` 是真值，就返回它自己；Ru果是假值，就返回后面的“默认值”。听起来hen完美，对吧？

但是这里埋着一个巨大的坑！JavaScript里的假值可不止 `null` 和 `

let count = 0;
let message = "当前数量：" + ; 
// 你以为输出是 "当前数量：0"
// 实际输出是 "当前数量：10"

kan，这就是 `||` 的“霸道”之处。它把 `0` 当作“没有”，直接给你换成了默认值。这种Bug在处理表单数据、数值计算时简直防不胜防。

救星登场：空值合并运算符

为了解决 `||` 的“误杀”问题，ES2020 给我们带来了一位新朋友：空值合并运算符，写作 `??`。这可是个好东西，它专门用来对付 `null` 和 `

它的规则非常简单且纯粹：

只有当左侧值是 `null` 或者 `undefined` 时才返回右侧的默认值。

Ru果是 `0`、`false`、`""` 这些其他假值，它统统照单全收，原样返回。

咱们把刚才那个 `count` 的例子 一下：

let count = 0;
let message = "当前数量：" + ; 
// 输出：当前数量：0
// 这才是我们要的效果！

再来kan一个处理用户信息的例子，这次三目运算符dou得靠边站：

let user = {
    name: null,
    age: 18,
    score: 0
};
// 使用 ?? 进行安全的容错
let finalName = user.name ?? "匿名用户"; // name是null，用默认值
let finalAge = user.age ?? 0;            // age是18，直接用
let finalScore = user.score ?? 60;      // score是0，但0不是null/undefined，所以保留0！

在这个例子里`score` 为 `0` 说明用户考了0分，这和“没参加考试”完全是两码事。用 `??` 就Neng精准区分这两者，而 `||` 就会把0分当成没考试，给你个60分及格，这逻辑显然是不通的。

实战场景：配置合并

在实际项目中，我们经常需要合并用户的配置和系统的默认配置。这时候 `??` 配合解构赋值，简直是神器。

function initGame {
    // 默认配置
    const defaults = {
        volume: 50,
        difficulty: 'normal',
        isDebug: false
    };
    // 合并配置
    const settings = {
        volume: options.volume ?? defaults.volume,
        difficulty: options.difficulty ?? defaults.difficulty,
        isDebug: options.isDebug ?? defaults.isDebug
    };
    console.log;
}
// 用户把音量调到了0，这是有效操作
initGame; 
// 输出: { volume: 0, difficulty: 'hard', isDebug: false }
// Ru果用 ||，volume 就会变成 50，用户静音的设置就被忽略了！

小心！优先级的陷阱

虽然 `??` hen好用，但跟其他运算符混用的时候，你得长个心眼。它的优先级比大多数运算符dou要低，只比 `=` 赋值高一点点。Ru果你把它和 `&&` 或者 `||` 放在一行，可Neng会出现意想不到的结果。

比如下面这个写法：

let x = a && b ?? c;

这行代码会报错！因为引擎不知道你是想先算 `a && b` 还是先算 `b ?? c`。这时候，括号就是你的救命稻草。

// 明确意图：先计算 a && b，Ru果结果为 null/undefined，再取 c
let x =  ?? c; 
// 或者：先判断 b ?? c，再和 a 进行与运算
let y = a && ;

为了代码的可读性和安全性，建议在涉及复杂表达式时总是加上括号。别为了省那两个字符，让同事在调试时怀疑人生。

黄金搭档：可选链操作符

提到 `??`，就不得不提它的Zui佳拍档——可选链操作符 `?.`。在处理深层嵌套的对象时这俩简直是天作之合。

以前我们要取一个深层属性，得写成这样：

let city = "";
if  {
    city = user.profile.address.city;
}

或者用三目运算符套娃，写出来像根面条。现在有了 `?.`，我们Ke以这样写：

let city = user?.profile?.address?.city ?? "未知城市";

这行代码的意思是：一路向右探索，只要中间任何一环是 `null` 或 `

那些年我们用过的其他判断法

除了上面这些主角，JavaScript里还有一些判断数据类型和空值的“偏门”方法，虽然不常用，但在特定场景下也Neng派上用场。

1. typeof 的局限性

hen多人喜欢用 `typeof variable === '

2. instanceof 和 constructor

这两个通常用来判断具体的对象类型，比如是不是数组，是不是日期对象。但在Zuo简单的空值判断时它们就显得有点杀鸡用牛刀了而且Ru果变量是基本类型，用 `instanceof` 还会直接报错。

3. 利用 Object.prototype.toString

这是Zui准确的方法之一，通过 `Object.prototype.toString.call` Ke以获取精确的类型字符串。不过写起来太长了一般dou封装在工具库里平时写业务逻辑hen少直接这么用。

到底该用哪个？

聊了这么多，Zui后咱们来个。面对空值判断，你的工具箱里应该有这几把刷子：

三目运算符 适合简单的二选一逻辑，用来替代简单的 `if-else`，让代码geng紧凑。

逻辑或 当你确实想把 `0`、`""`、`false` dou当作“无效值”处理时用它Zui方便。比如设置函数参数的默认回调函数。

空值合并 当你只想针对 `null` 和 `undefined` Zuo防御，而要保留 `0`、`""` 等假值时这是首选。特别是处理用户输入、配置项时。

可选链 访问深层对象属性时的必备良药，记得配合 `??` 使用。

编程这事儿，没有银弹。不同的场景适合不同的语法。别为了炫技而强行使用 `??`，也别因为守旧而拒绝新语法。希望这篇文章Neng帮你理清思路，下次再写空值判断的时候，Neng下意识地选出Zui合适的那一个。毕竟写出既健壮又优雅的代码，是我们每个开发者孜孜不倦的追求，不是吗？

---