JavaScript中??、??=、?.和||的区别详解

作者：青柠时间：2026-10-25 17:25:42浏览：582

本文深入解析JavaScript中??、??=、?.和||四个运算符的核心区别。重点阐述空值合并操作符??仅在左侧为null或undefined时返回右侧值，而逻辑或||基于布尔转换判断。同时说明可选链?.安全访问深层属性，以及空值赋值??=的条件赋值逻辑，帮助开发者避免类型转换陷阱。

前言

undefined和null是两种特殊的数据类型，直接对它们使用点操作符访问属性会引发错误。

    let a;
    console.log(a?.name); //undefined
    console.log(a.name); //报错

    let obj = {};
    console.log(obj.name); //undefined
    console.log(obj?.name?.a); //undefined
    console.log(obj.name.a); //报错

?? 与 || 的区别

相同点：

?? 和 || 的语法结构一致，均由前后两个值及中间的操作符组成，根据左侧值决定返回左侧还是右侧的值。

A ?? B

A || B

不同点：

判断逻辑不同：

使用 ?? 时，仅当左侧值为 null 或 undefined 时才返回右侧值；

使用 || 时，左侧值会先转换为布尔值进行判断：若为 true 则返回左侧值，若为 false 则返回右侧值。

// ??
    console.log(undefined ?? 2);  // 2
    console.log(null ?? 2);   // 2
    console.log(0 ?? 2);  // 0
    console.log("" ?? 2);   // ''
    console.log(true ?? 2);  // true
    console.log(false ?? 2);   // false
 
// ||
    console.log(undefined || 2);   // 2
    console.log(null || 2);     // 2
    console.log(0 || 2);        // 2
    console.log("" || 2);     // 2
    console.log(true || 2);     // true
    console.log(false || 2);      // 2

空值合并操作符 ??

只有当左侧为null 或者undefined 时，才会返回右侧的值

可选链操作符 ?.

?. 允许读取连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

?. 操作符的功能类似于. 链操作符，不同之处在于，在引用为空，即 null 或者 undefined 的情况下不会引起错误，该表达式短路返回值。

    const obj = { a: { b: [{ name: "obj" }] } };
 
    // 原本的写法
    console.log(obj && obj.a && obj.a.b.length && obj.a.b[0].name); //obj
 
    // 可选链写法
    console.log(obj?.a?.b?.[0]?.name); // obj
    console.log(obj?.b?.c?.d); // undefined

?.可以和 ?? 运算符结合使用

    const obj = { a: { name: "obj" } };
 
    console.log(obj?.a?.b ?? "hello world"); // hello world

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

当??=左侧的值为null、undefined的时候,才会将右侧变量的值赋值给左侧变量.其他所有值都不会进行赋值

    let a = "你好";
 
    let b = null;
    let c = undefined;
    let d = 0;
    let e = "";
    let f = true;
    let g = false;
 
    console.log((b ??= a)); // 你好
    console.log((c ??= a)); // 你好
    console.log((d ??= a)); // 0
    console.log((e ??= a)); // ''
    console.log((f ??= a)); // true
    console.log((g ??= a)); // false
 
    console.log(b); // 你好
    console.log(c); // 你好
    console.log(d); // 0
    console.log(e); // ''
    console.log(f); // true
    console.log(g); // false

补充：?. 链判断运算符

链判断运算符?. 允许开发人员读取深度嵌套在对象链中的属性值，而不必验证每个引用。当引用为空时，表达式停止计算并返回 undefined。

let travelPlans = {
  destination: 'DC',
  monday: {
    location: 'National Mall',
    budget: 200,
    host: null
  }
}
let res = travelPlans?.tuesday?.location ?? "locahost"; // => locahost
let res2 = travelPlans?.host; // => undefined

这个是什么操作呢？？

这个location是哪里来的呢？这个tuesday又是哪里来的呢？就算不是外面的travelPlans这个对象里也没有location和tuesday啊！！！经过询问大佬后得

let res = travelPlans?.tuesday?.location; 
<=等价=> 
let res = travelPlans&& travelPlans.tuesday&& travelPlans.tuesday.location

作用就是判断这个对象（travelPlans）下的（tuesday）下的（location）是否为null或者undefined，当其中一链为null或者undefined时就返回undefined，这样即使中间缺少一个属性也不会报错，双问号后面接的就是默认值。

总结

到此这篇关于JavaScript中? ?、??=、?.和 ||区别的文章就介绍到这了,更多相关JS中? ?和??=和?.和 ||区别内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53