ES6中??与||的区别及链式调用详解
本文详解ES6中??空值合并运算符与||逻辑或运算符的核心区别，指出前者仅处理null和undefined，保留0和空字符串；后者将所有假值视为默认值。同时介绍?.链判断运算符的三种写法及??=、&&=等新特性，帮助开发者避免默认值覆盖错误。
??和||均属于JavaScript中的逻辑运算符，但二者在行为上存在显著差异。??被称为空值合并运算符，主要用于检测左侧表达式是否为null或undefined。若左侧值为null或undefined，则返回右侧表达式的值；否则直接返回左侧表达式的值。
let foo = null;
let bar = foo ?? 'default'; // bar 的值为 'default'
let baz;
let qux = baz ?? 'default'; // qux 的值为 'default'
||是逻辑或运算符，用于判断左侧表达式是否为“假值”。若左侧为假，则返回右侧表达式的值；若左侧为真，则返回左侧表达式的值。在JavaScript中，null、undefined、''、0以及NaN被认定为假值，其余所有值均被视为真值。
let foo = 'hello';
let bar = foo || 'default'; // bar 的值为 'hello'
let baz;
let qux = baz || 'default'; // qux 的值为 'default'
综上所述，??与||的主要区别在于逻辑判断的范围与应用场景。??专门用于空值合并场景，而||则适用于更广泛的逻辑或逻辑判断。
?. 链判断运算符
该运算符用于判断左侧对象是否为null或undefined。若是，则停止后续运算并返回undefined；否则继续向下运算，直至返回最后一个值。它允许开发者读取深度嵌套对象链中的属性，而无需逐一验证每一层是否存在。当路径中某一层值为空时，表达式自动终止并返回undefined。
let person = {
name: '拾柒',
body: {
color: 'yellow',
height: 179,
weight: 70,
sex: null
},
action: function(name){
console.log(name)
}
}
let res = person?.body?.age; // => undefined
// 等价于
let res = person&& person.body&& person.body.location // 作用就是判断person下的body下的age是否为null或者undefined，当其中一链为null或者undefined时就直接返回undefined
let res2 = person?.sex; // => undefined
链判断运算符?.主要包含三种语法形式。
- obj?.prop：用于判断对象属性是否存在（参考上述示例）。
- obj?.[expr]：与上述属性访问方式作用相同。
- func?.(...args)：用于判断函数或对象方法是否存在并调用。
person ?. action ?. ('peter'); // peter
?? 空值合并运算符
该运算符允许在忽略特定错误值（如0或空字符串）的同时指定默认值。其判断逻辑为：若左侧对象为undefined或null，则直接返回右侧值；否则返回左侧值。其判断方式与||类似，但核心区别在于：
- ?? 仅针对 undefined 和 null 进行判断。
function query(item) {
return item ?? {}
}
// 等价于
function query(item) {
if (item == null || item == undefined) {
return {}
} else {
return item;
}
}
- || 则针对所有假值进行判断，包括 undefined、null、''（空字符串）、false 和 0。
function query(item) {
return item || {}
}
// 等价于
function query(item) {
if (item === 0 || item === "" || item === false || item === null || item === undefined) {
return {}
} else {
return item;
}
}
??= 空赋值运算符
该赋值运算符仅在目标值为 null 或 undefined 时才执行赋值操作（具体适用场景需结合业务逻辑判断，与??相比有其特定用途）。
function config(options) {
options.duration ??= 100;
options.speed ??= 25;
return options;
}
config({ duration: 125 }); // { duration: 125, speed: 25 }
config({}); // { duration: 100, speed: 25 }
&&= 与赋值运算符
当左侧表达式的值不是假值时，将右侧表达式的值赋给左侧变量；若左侧为假值，则直接保留该假值。
let A = 'abc';
let a = 1;
let b = 0;
let c = false;
let d = null;
let e = undefined;
let f = '';
A &&= '拾柒'; // '拾柒'
a &&= '拾柒'; // '拾柒'
b &&= '拾柒'; // 0
c &&= '拾柒'; // false
d &&= '拾柒'; // null
e &&= '拾柒'; // undefined
f &&= '拾柒'; // ''
!! 双非运算符
常用于类型判断或布尔转换。它在第一步对变量取反（!）后，再次进行逻辑取反运算，从而将变量转换为布尔类型。
var a;
if(a != null && typeof(a) != undefined && a != ''){
//a有内容才执行的代码
}
上述双非操作等价于直接进行布尔转换判断。
if(!!a){
//a有内容才执行的代码...
}本文简要介绍了ES6中??与||的区别及相关运算符用法，更多相关es6 ??与||内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38