当前位置：首页 > news >正文

JavaScript双问号操作符（??）详解，解决使用 || 时因类型转换带来的问题

news 来源：原创 2025/8/25 6:11:26

JavaScript双问号操作符（??）详解，解决使用||时因类型转换带来的问题

一、双问号操作符??的基础用法

1、传统方式的痛点

2、双问号操作符??的精确判断

3、双问号操作符??与逻辑或操作符||的对比

二、复杂场景下的空值处理

1、深层嵌套对象的默认值

2、函数参数的默认值陷阱

3、多条件回退策略

三、实战案例解析

1、Vue组件中的Prop处理

2、表单验证

四、双问号操作符的性能优势

五、结语

作者：watermelo37

CSDN万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者，全平台博客昵称watermelo37。

一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

JavaScript双问号操作符（??）详解，解决使用||时因类型转换带来的问题

在现代JavaScript开发中，处理变量默认值是一个常见但容易引发bug的操作。很多开发者可能都遇到过这样的问题：使用||设置默认值时，意外覆盖了0、''等合法值。这时候，ES2020引入的双问号操作符（??）就能完美解决这类问题。本文将带您全面掌握这个操作符的使用场景和高级技巧。

一、双问号操作符??的基础用法

1、传统方式的痛点

const count = 0;
const result = count || 10; // 得到10，但0可能是有效值

使用||时，会把所有假值（falsy values）视为无效值，包括：0、''、false、NaN、null、undefined。这在处理数字表单、开关状态等场景时会引发问题。

以上述案例来说，我想要count被赋值的情况下就使用count的值，要是没有被赋值就使用默认值10，但是当count被初始化并赋值为0的时候，逻辑或操作符||依然会认为是无效值，并将result赋值为10，这显然和我预期的结果相悖。这是因为JavaScript是一门弱类型语言，会进行强制类型转换。

2、双问号操作符??的精确判断

同样还是这个例子：

const count = 0;
const result = count ?? 10; // 得到0，完美保留有效值

此时result的结果就是10，因为??操作符只对null和undefined这两个原始值进行判断，其他假值都会被保留。这种特性使其特别适合处理以下场景：

表单输入值（允许0或空字符串）
布尔类型配置项
数字类型参数（允许0）

3、双问号操作符??与逻辑或操作符||的对比

特性	?? 操作符	\|\| 操作符
触发条件	仅 null/undefined	所有假值
适用场景	精准空值判断	快速默认值设置
处理 0 和 ''	保留有效值	覆盖为默认值
处理 false	保留布尔值	覆盖为默认值

二、复杂场景下的空值处理

1、深层嵌套对象的默认值

结合可选链操作符（?.），可以安全地处理多层嵌套对象的属性访问。

const config = {api: {v1: {endpoint: ''}}
};// 传统写法（需要逐层判断）
const endpoint = config.api?.v1?.endpoint || 'default';// 使用??的改进写法
const endpoint = config.api?.v1?.endpoint ?? 'default';

2、函数参数的默认值陷阱

当函数参数需要接收布尔值时，使用??可以避免意外覆盖用户传入的false值。

function createPost(data) {// 错误写法：会覆盖有效布尔值const isPublic = data.isPublic || true;// 正确写法：仅处理null/undefinedconst isPublic = data.isPublic ?? true;
}

3、多条件回退策略

通过链式使用??，可以实现多层级的配置回退机制，这种模式在读取环境变量时特别实用。

const theme = userConfig.theme ?? systemConfig.theme ?? process.env.THEME ?? 'light';

三、实战案例解析

1、Vue组件中的Prop处理

如果disabled接收的值为false，如果使用逻辑或操作符，就会被认为是无效值，从而使用默认的true值。如果使用双问号操作符就可以避免这种情况。

<template><input :disabled="isDisabled" />
</template><script>
export default {props: {disabled: {type: Boolean,default: undefined}},computed: {isDisabled() {return this.disabled ?? true;}}
}
</script>

2、表单验证

就算你不允许用户输入空格，起码要允许用户输入0和引号吧？如果使用逻辑或操作符，根本无法通过表单验证，使用双问号操作符就可以避免这种情况。

function validateForm(formData) {const errors = [];if (formData.username?.trim() ?? false) {errors.push('用户名不能为空');}if (formData.age ?? false) {errors.push('年龄必须填写');}return errors;
}

四、双问号操作符的性能优势

实际测试显示，??在性能上与||基本持平，但在处理复杂对象时更具优势。这是因为双问号操作符只检查null和undefined，比||操作符的类型转换操作更高效。

当然，这部分差异很小，更多的作用是展示开发者的思维能力。

// 测试环境：Chrome 112，100万次运算
console.time('||');
for (let i = 0; i < 1000000; i++) null || 10;
console.timeEnd('||'); // 2.1msconsole.time('??');
for (let i = 0; i < 1000000; i++) null ?? 10;
console.timeEnd('??'); // 1.8ms

五、结语

双问号操作符（??）这个看似简单的语法糖，实则蕴含着提升代码健壮性的强大能力。在实际项目中，建议结合TypeScript的严格空值检查，构建更可靠的类型安全体系。

只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

其他热门文章，请关注：

极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解

DeepSeek：全栈开发者视角下的AI革命者

通过array.filter()实现数组的数据筛选、数据清洗和链式调用

通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能

TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急

通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制

深入理解 JavaScript 中的 Array.find() 方法：原理、性能优势与实用案例详解

el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能

MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、DOM操作等

高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图

Dockerfile全面指南：从基础到进阶，掌握容器化构建的核心工具

在线编程实现！如何在Java后端通过DockerClient操作Docker生成python环境

干货含源码！如何用Java后端操作Docker（命令行篇）

JavaScript双问号操作符（??）详解，解决使用||时因类型转换带来的问题

一、双问号操作符??的基础用法

1、传统方式的痛点

2、双问号操作符??的精确判断

3、双问号操作符??与逻辑或操作符||的对比

二、复杂场景下的空值处理

1、深层嵌套对象的默认值

2、函数参数的默认值陷阱

3、多条件回退策略

三、实战案例解析

1、Vue组件中的Prop处理

2、表单验证

四、双问号操作符的性能优势

五、结语

相关文章：