前言

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

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


1、传统方式的痛点

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

复制代码

使用||时，会把所有假值 （falsy values）视为无效值，包括：0、''、false、NaN、null、undefined。这在处理数字表单、开关状态等场景时会引发问题。
以上述案例来说，我想要count被赋值的情况下就使用count的值，要是没有被赋值就使用默认值10，但是当count被初始化并赋值为0的时候，逻辑或操作符||依然会认为是无效值，并将result赋值为10，这显然和我预期的结果相悖。这是因为JavaScript是一门弱类型语言，会进行强制类型转换。

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

同样还是这个例子：

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

复制代码

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

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

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

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


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

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

1. const config = {
   
2.   api: {
   
3.     v1: {
   
4.       endpoint: ''
   
5.     }
   
6.   }
   
7. };
   
8. 
   
9. // 传统写法（需要逐层判断）
   
10. const endpoint = config.api?.v1?.endpoint || 'default';
    
11. 
    
12. // 使用??的改进写法
    
13. const endpoint = config.api?.v1?.endpoint ?? 'default';

复制代码

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

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

1. function createPost(data) {
   
2.   // 错误写法：会覆盖有效布尔值
   
3.   const isPublic = data.isPublic || true;
   
4.   
   
5.   // 正确写法：仅处理null/undefined
   
6.   const isPublic = data.isPublic ?? true;
   
7. }

复制代码

3、多条件回退策略

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

1. const theme = userConfig.theme
   
2.   ?? systemConfig.theme
   
3.   ?? process.env.THEME
   
4.   ?? 'light';

复制代码

三、实战案例解析


1、Vue组件中的Prop处理

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

1. <template>
   
2.   <input :disabled="isDisabled" />
   
3. </template>
   
4. 
   
5. <script>
   
6. export default {
   
7.   props: {
   
8.     disabled: {
   
9.       type: Boolean,
   
10.       default: undefined
    
11.     }
    
12.   },
    
13.   computed: {
    
14.     isDisabled() {
    
15.       return this.disabled ?? true;
    
16.     }
    
17.   }
    
18. }
    
19. </script>

复制代码

2、表单验证

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

1. function validateForm(formData) {
   
2.   const errors = [];
   
3.   
   
4.   if (formData.username?.trim() ?? false) {
   
5.     errors.push('用户名不能为空');
   
6.   }
   
7.   
   
8.   if (formData.age ?? false) {
   
9.     errors.push('年龄必须填写');
   
10.   }
    
11.   
    
12.   return errors;
    
13. }

复制代码

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

实际测试显示，??在性能上与||基本持平，但在处理复杂对象时更具优势。这是因为双问号操作符只检查null和undefined，比||操作符的类型转换操作更高效。
当然，这部分差异很小，更多的作用是展示开发者的思维能力。

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

复制代码

五、结语

双问号操作符（??）这个看似简单的语法糖，实则蕴含着提升代码健壮性的强大能力。在实际项目中，建议结合TypeScript的严格空值检查，构建更可靠的类型安全体系。
到此这篇关于JavaScript双问号操作符(??)详解及如何解决使用||时因类型转换带来的问题的文章就介绍到这了,更多相关JS双问号操作符及||类型转换问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339479lf1.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！