公司建设网站申请报告,中建南方建设集团网站,本地搬家网站建设思路,绍兴网站建设技术外包目录
JavaScript双问号操作符#xff08;??#xff09;详解#xff0c;解决使用||时因类型转换带来的问题
一、双问号操作符??的基础用法
1、传统方式的痛点
2、双问号操作符??的精确判断
3、双问号操作符??与逻辑或操作符||的对比
二、复杂场景下的空值处理 …目录
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值。如果使用双问号操作符就可以避免这种情况。
templateinput :disabledisDisabled /
/templatescript
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 112100万次运算
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命令行篇
