JavaScript 可选链、空值合并与空值赋值运算符详解

前言

在开发过程中，经常需要进行大量的空值判断以增强代码的容错性。传统做法通常依赖三目运算符、逻辑与或运算符以及 if-else 结构，这不仅导致代码冗余，还使得后期维护变得困难，满屏的条件判断令人头疼。本文将介绍几种简化空值处理的现代 JavaScript 方法，旨在帮助开发者提升代码简洁性与可维护性。

可选链(.?)

当一个变量的值为 null 或 undefined 时，如果尝试使用点操作符（.）调用其方法或访问属性，程序会抛出错误。

let a;
let b = a.name;

执行上述代码将导致运行时错误。

这种情况等同于直接在 undefined 或 null 上访问属性。由于 undefined 和 null 是特殊的数据类型，无法使用点操作符访问其属性。当变量可能为 null 或 undefined，但你需要访问其属性时，传统的处理方式如下：

let a;
let b;
if(!!a){
    b = a.name;
}else{
    b = undefined;
}

只有当变量 a 存在时，才访问其 name 属性。若需进一步处理，还可检查 a 的数据类型。但这并非本文重点。可以看出，实现这一简单逻辑需要编写大量代码，是否存在更简洁的写法？请参考以下示例。

let a;
let b = a?.name;

这里引入了 ?. 符号，即可选链操作符。其逻辑与前述 if-else 示例一致：仅当 a 存在且拥有 name 属性时，才将值赋给 b；否则 b 为 undefined。关键在于，无论 a 是否存在，使用此写法均不会报错。

此外，可选链还可以进行链式调用。

let a;
let b;
b = a?.name?.age?.haha?.就是不报错
a?.b?.c(“还是不报错”)

你可以无限链接属性访问。只要最终能访问到有效属性，结果将被赋值给 b；若中途遇到 null 或 undefined，则返回 undefined。这种链式结构使得代码更加紧凑。

空值合并运算符(??)

基于上述示例，我们进一步探讨更简洁的写法。

let b;
let a = 0;
let c = { name:'buzhimingqianduan' }

if(!!a || a === 0 ){
    b = a;
}else{
    b = c;
}

如示例所示，当我们需要判断一个值是否存在，即使该值为 0 也视为有效时，可以使用此运算符。传统写法可能如下：

let b;
let a = 0;
let c = { name:'buzhimingqianduan' }

b = a ?? c;

使用上述示例，当 a 为 null 或 undefined 时，b 等于 c；对于除 null 和 undefined 外的任何值（包括 0、false、空字符串等），b 均等于 a。

空值赋值运算符(??=)

其用法与前述示例类似。

let b = '你好';
let a = 0
let c = null;
let d = '123‘
b ??= a;  // b = “你好”
c ??= d  // c = '123'

仅当 ??= 左侧变量的值为 null 或 undefined 时，才会将右侧变量的值赋给左侧变量。对于其他所有值，不进行赋值操作。这在特定场景下能显著减少代码量。

趣味问答时间:

let a;
let b = "不知名前端"
let c = null;
let d = 0;
let e;

e ??= a?.b ?? c ?? d?.a ?? b;
console.log(e)

最终结果是什么？

答案是：一堆问号。

需要注意的是：?? 运算符仅忽略 null 和 undefined，其他 falsy 值（如 0、false、空字符串）会被视为有效值。

var ibo = {}
console.log(ibo?.a ?? 111) //  111
var ibo = {a:{b:1}}
console.log(ibo?.a?.b ?? 111) //1

console.log(1??'2') //  1
console.log(null ?? "xx") // xx
undefined
console.log(undefined ?? "xx") //  xx
console.log( ' '?? "xx")  //  空值

最后

希望以上内容对大家有所帮助。如果觉得有用，欢迎关注，后续我将分享更多前端相关知识。如有特定想了解的内容，也欢迎私信交流，我将安排时间进行分享。

本文介绍了 JavaScript 中 ?.、?? 和 ??= 的用法及含义。如需了解更多相关内容，请搜索本站历史文章或继续浏览后续文章。感谢大家的支持！