一分钟认识JS中 ?? 和 || 两者的用法和区别

前言

在JS中,??|| 都可以处理空值或者未定义,这两个操作符有什么区别呢?

||

|| 是逻辑或运算符,用于进行逻辑判断,它是这样运行的,如果第一操作值为假值(null、undefined、false、空字符串、0、NaN),那么就会返回第二个值。如果第一个值为真值,返回第一个值。

|| 一般用在处理默认值或者条件运算

示例

js 复制代码
const a = null;
const b = "Hello World";
const c = a || b; // c is now "Hello World"

??

??是空值合并操作符,用于对空值(null、undefined)进行处理。它的行为是这样的:如果第一个操作数是空值(例如 nullundefined),那么它就会返回第二个操作数的值。反之返回第一个值。

?? 一般用于简化代码进行空值合并

js 复制代码
const a = null;
const b = "Hello World";
const c = a ?? b; // c is now "Hello World"

区别

js 复制代码
const a = false
const b = "Hello World"
a ?? b  // false
a || b // "Hollo World"

总结起来有两点不同:

  1. 值判断范围不同: || 判断是否为假值 , 而??主要针对null undefined
  2. 用途稍有不同:|| 是逻辑运算符偏向逻辑处理, ??主要为了简化代码
相关推荐
黄贵根6 小时前
JavaScript实现教培行业意向登记系统
开发语言·javascript·ecmascript
codeGoogle9 小时前
自研 IM 还是选择第三方 SDK?企业开发者应该如何权衡?
前端·后端·程序员
mifengxing9 小时前
LeetCode 41.缺失的第一个正数|Hard题O(n)+O(1)最优解法深度解析
java·算法·leetcode·排序算法
zzzzzz31010 小时前
从 react-bits 看动效组件化:别把视觉效果写成一次性页面代码
javascript·react.js·开源
用户9385156350710 小时前
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析
前端·javascript·react.js
滴滴答答哒10 小时前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李10 小时前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
markinmarkin12 小时前
Spring 中Bean 的作用域有哪些?
java·后端·spring
赵大仁12 小时前
生成式 UI 实战:用 JSON Schema + React 动态渲染 AI 界面
前端·ai·react·next.js·前端架构·生成式ui