首页 > 网络编程 > JavaScript > javascript技巧 > JS 空值合并运算符

JS中空值合并运算符 ?? 的使用

2025-07-17 10:33:40 作者：Mr.怪兽

本文介绍了JavaScript中的空值合并运算符??,解释了它在null或undefined值时的使用,并对比了与逻辑运算符||的不同之处,感兴趣的可以了解一下

什么是空合并运算符？

空合并运算符 ?? (Nullish coalescing operator) 是一个逻辑运算符，当其左侧操作数为 null 或 undefined 时，它返回其右侧操作数，否则返回其左侧操作数

const foo = null ?? 'default string';
console.log(foo);  //output: "default string"

const bar = 0 ?? 'default string'
console.log(bar);  //output: 0

基本语法

let result = value1 ?? value2;

如果 value1 不是 null 或 undefined，则返回 value1。
如果 value1 是 null 或 undefined，则返回 value2。

空值合并运算符的工作原理

与逻辑或 (||) 运算符不同，空值合并运算符只会考虑 null 和 undefined，而不会将其他假值（如 false、0、NaN、"" 空字符串等）视为需要替代的值。

示例：

let a = null;
let b = 5;
let c = undefined;
let d = 0;

console.log(a ?? b);  // 5，因为 a 是 null
console.log(c ?? b);  // 5，因为 c 是 undefined
console.log(d ?? b);  // 0，因为 d 不是 null 或 undefined，而是 0

比较 ?? 和 ||

let x = 0;
let y = 10;

console.log(x || y);  // 10，因为 x 是假值（0）
console.log(x ?? y);  // 0，因为 x 不是 null 或 undefined

在上面的例子中：

使用 || 时，x 的值为 0，它被视为假值，所以返回了 y（即 10）。
使用 ?? 时，x 是 0，它不是 null 或 undefined，所以返回了 0。

使用空值合并运算符的场景

提供默认值：当一个值可能为 null 或 undefined 时，可以用 ?? 来提供一个默认值。

let userAge = null;
let defaultAge = 18;

let age = userAge ?? defaultAge;
console.log(age);  // 18，因为 userAge 是 null

避免无效值：当你有多个潜在的 null 或 undefined 值时，可以使用空值合并运算符来选择第一个有效值。

let firstName = null;
let lastName = undefined;
let defaultName = "Anonymous";

let name = firstName ?? lastName ?? defaultName;
console.log(name);  // "Anonymous" 因为 firstName 和 lastName 都是 null 或 undefined

空值合并与可选链（?.）结合使用

空值合并运算符和可选链（?.）结合使用时，能够更安全地访问对象的属性，并且提供一个默认值。

let user = { name: "Alice" };

let userAge = user?.age ?? 18;
console.log(userAge);  // 18，因为 user 对象中没有 `age` 属性，所以返回默认值 18

在这个例子中，?. 用于安全地访问 user.age，如果 age 不存在，它返回 undefined，然后 ?? 提供默认值 18。

??运算符与 || 运算符的区别

很多人会搞混?? 运算符与 || 运算符，觉得这两个实现的效果都一样。其实这是不严谨的，它们之间还是有一些细微的差别。
?? 和 || 主要区别在于假 (false) 和假值(falsy) 的区别。

?? 仅当左操作数为 null 或 undefined 时， ?? 运算符才会将结果作为右操作数。
||运算符会将左操作数的所有假值(falsy) 的结果作为右操作数

例如：

// 1. 使用 0 作为输入 
const a = 0;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = 0

// 2. 空字符串 '' 作为输入
const a = ''
console.log(`a || "ABC" = ${a || "ABC"}`); // a || "ABC" = ABC
console.log(`a ?? "ABC" = ${a ?? "ABC"}`); // a ?? "ABC" = 

// 3. 使用 null 作为输入
const a = null;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = 10

// 4. 使用 undefined 作为输入
const a = {name: ''}

console.log(`a.name ?? 'varun 1' = ${a.name ?? 'varun 1'}`); 
console.log(`a.name || 'varun 2' = ${a.name || 'varun 2'}`);
// a.name ?? 'varun 1' = 
// a.name || 'varun 2' = varun 2

// 5. 使用 false 作为输入
const a = false;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = false

到此这篇关于JS中空合并运算符 ?? 的使用的文章就介绍到这了,更多相关JS 空合并运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！