js 空值合并操作符(??)

在 JavaScript 里,空值合并操作符(??)是一个逻辑操作符。当左侧操作数为 null 或者 undefined 时,它会返回右侧操作数;反之,则返回左侧操作数。下面为你详细介绍其使用方法与示例。

基本语法

javascript

ruby 复制代码
leftExpr ?? rightExpr

代码示例

javascript

ini 复制代码
// 示例 1:左侧为 null
const value1 = null;
const result1 = value1 ?? 'default value';
console.log(result1); // 输出: 'default value'

// 示例 2:左侧为 undefined
const value2 = undefined;
const result2 = value2 ?? 'default value';
console.log(result2); // 输出: 'default value'

// 示例 3:左侧为其他值
const value3 = 0;
const result3 = value3 ?? 'default value';
console.log(result3); // 输出: 0

const value4 = false;
const result4 = value4 ?? 'default value';
console.log(result4); // 输出: false

const value5 = '';
const result5 = value5 ?? 'default value';
console.log(result5); // 输出: ''

与逻辑或操作符(||)的区别

逻辑或操作符(||)在左侧操作数为假值(如 0false'' 等)时,就会返回右侧操作数;而空值合并操作符(??)仅在左侧操作数为 null 或者 undefined 时,才会返回右侧操作数。示例如下:

javascript

ini 复制代码
// 使用逻辑或操作符
const value6 = 0;
const result6 = value6 || 'default value';
console.log(result6); // 输出: 'default value'

// 使用空值合并操作符
const value7 = 0;
const result7 = value7 ?? 'default value';
console.log(result7); // 输出: 0

空值合并操作符的链式使用

你可以链式使用空值合并操作符,以此来检查多个可能为 nullundefined 的值。示例如下:

javascript

ini 复制代码
const a = null;
const b = undefined;
const c = 'valid value';
const result = a ?? b ?? c;
console.log(result); // 输出: 'valid value'

通过这些示例能够看出,空值合并操作符在处理可能为 nullundefined 的值时非常实用,能让你轻松地提供默认值。

相关推荐
gis开发之家35 分钟前
《Vue3 从入门到大神37篇》Vue3 源码详解(七):watch 与 watchEffect 源码对比——副作用是如何被追踪的?
javascript·前端框架·vue3·vue3源码
bloglin999992 小时前
langchain 和 langgraph 和 react
javascript·react.js·langchain
触底反弹2 小时前
🚀 删了数据刷新又回来?3 组件 × 4 回调 × 3 坑讲透 React 父子通信
前端·javascript·react.js
会周易的程序员4 小时前
js-shm: 高性能 Node.js 共享内存模块
开发语言·javascript·c++·node.js·共享内存·shm
带娃的IT创业者4 小时前
重新定义前端构建速度:深度解析 SWC 如何用 Rust 颠覆 JavaScript 工具链
前端·javascript·rust·前端构建·swc
新中地GIS开发老师5 小时前
零基础WebGIS开发入门 | GeoJSON数据持久化
前端·javascript·gis·webgis·三维gis开发
blns_yxl6 小时前
正则驱动实时表单验证(HTML+CSS+JS+正则)
javascript·css·html
Quz6 小时前
QML 与 JavaScript 交互方式:内联函数、外部文件、信号槽与工作线程
javascript·qt
Allshadow7 小时前
Nest.js - 连接数据库
javascript·nestjs
冰暮流星7 小时前
javascript之date对象
开发语言·javascript·ecmascript