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

js中?? 和 || 的区别详解

??|| 的区别详解

在 JavaScript/TypeScript 中,??(空值合并运算符)和 ||(逻辑或运算符)都用于提供默认值,但它们在处理不同值时有关键区别

核心区别

运算符 名称 触发条件 处理假值的方式
?? 空值合并运算符 仅当左侧为 nullundefined 保留假值(0、''等)
|| 逻辑或运算符 当左侧为 任何假值(falsy) 跳过所有假值

假值(falsy)列表

在 JavaScript 中,假值包括:

  • false
  • 0
  • ''(空字符串)
  • null
  • undefined
  • NaN

详细比较

1. 处理 null/undefined

两者行为相同:

null ?? 'default'      // 'default'
undefined ?? 'default' // 'default'null || 'default'      // 'default'
undefined || 'default' // 'default'

2. 处理数字 0

关键区别点:

0 ?? 10  // 0(保留0)
0 || 10  // 10(跳过0)

3. 处理空字符串 ''

'' ?? 'default'  // ''(保留空字符串)
'' || 'default'  // 'default'(跳过空字符串)

4. 处理布尔值 false

false ?? true  // false(保留false)
false || true  // true(跳过false)

5. 处理 NaN

NaN ?? 100  // NaN(保留NaN)
NaN || 100  // 100(跳过NaN)

实际应用场景

适合使用 ?? 的情况:

  1. 0、空字符串或false是有效值 时:

    // 分页组件
    const currentPage = userInput ?? 1; // 0是有效输入// 温度显示
    const temperature = sensorValue ?? 20; // 0是有效温度
    
  2. 需要明确区分 空值(null/undefined)假值(0、''等)

    const fontSize = settings.fontSize ?? 16; 
    // 0 表示小号字体,不应被替换
    

适合使用 || 的情况:

  1. 所有假值都应视为无效 时:

    const username = input || 'Anonymous';
    // 空字符串、null、undefined 都视为无效
    
  2. 布尔值检查:

    const isEnabled = featureFlag || false;
    

Vue 中的使用示例

<template><!-- 显示消息:空消息显示"暂无消息" --><div>{{ message || '暂无消息' }}</div><!-- 显示评分:0分是有效分数 --><div>评分:{{ rating ?? '未评分' }}</div><!-- 显示评论数:0评论是有效值 --><div>评论:{{ commentCount ?? '无' }}</div>
</template><script setup lang="ts">
import { ref } from 'vue';const message = ref('');
const rating = ref(0);
const commentCount = ref(0);
</script>

优先级与结合性

  1. ??|| 可以混合使用,但要注意优先级:

    // 需要括号明确优先级
    const value = (a ?? b) || c;
    const value = a ?? (b || c);
    
  2. ?? 不能直接与 &&|| 组合使用:

    // 语法错误
    a || b ?? c;
    a ?? b || c;// 正确写法
    (a || b) ?? c;
    a ?? (b || c);
    

总结表

| 值 | a ?? b 结果 | a || b 结果 |
|-----------------|---------------|---------------|
| null | b | b |
| undefined | b | b |
| 0 | 0 | b |
| '' | '' | b |
| false | false | b |
| NaN | NaN | b |
| 其他真值 | a | a |

简单记忆

  • ?? 当你想保留 0''false 等有效值
  • || 当你想跳过所有假值(包括 0'' 等)

根据你的具体需求选择正确的运算符,可以避免很多边界情况的 bug!

http://www.hskmm.com/?act=detail&tid=21542

相关文章:

  • 微信机器人API接口| 个人开发者必备
  • 直击现场! “ 直通乌镇 ”开源赛复赛收官,OpenCSG担任评委,十强藏着哪些产业机会?
  • Python 列表生成式、字典生成式与生成器表达式
  • java 解析json字符串,获取特定的字段值,JsonObject
  • python 批量提取txt数据中的值写入csv
  • 回忆中学的函数
  • Java 一行一行的读取文本,小Demo 大学问
  • 家里wifi电信出口ip如何控制不变,解决访问云服务器上面的资源
  • 2025 年挤压造粒机源头厂家最新推荐榜单:前五企业技术实力、服务能力及口碑测评指南对辊挤压/化肥挤压/干粉挤压造粒机厂家推荐
  • MYSQL数据库取消表的约束
  • 2025 年京东 e 卡回收平台最新推荐排行榜:权威测评实时结算平台,助力用户安全高效转让京东 e 卡
  • 2025 年支付宝消费券回收平台最新推荐榜单:优质平台权威测评,助您高效安全处理闲置消费券支付宝消费券回收/闲置支付宝消费券回收/支付宝消费券快速回收平台推荐
  • ICP备案查询网站 域名备案查询
  • 2025 年注浆管厂家最新权威推荐排行榜:聚焦 R780/108 / 隧道 / 预埋 / 桩基等专用产品,精选 TOP5 优质企业
  • stable diffusion网络结构详解
  • 9.30
  • 网络与系统攻防技术实验一——逆向破解与Bof
  • 【python】解决grpcio.protoc生成的pb文件里面没有类和方法定义
  • 阙韩
  • “计算机配置\Windows 设置\安全设置\本地策略\审核策略” 配置后不生效
  • Spring Boot 事件发布与监听 观察者模式的实际应用 - 实践
  • P13969 [VKOSHP 2024] Exchange and Deletion
  • Matlab 通用库的fft和dsp toolbox的dsp.fft对比
  • [CTS2024] 众生之门
  • [CEOI 2025] Equal Mex
  • [ROI 2018] Quick sort
  • CF2127F Hamed and AghaBalaSar
  • 2025 年PPH 管厂家推荐榜单:江苏镇江扬中优质 PPH 管道/管材/管件厂家权威精选
  • Label-Free Liver Tumor Segmentation
  • CF1951G Clacking Balls