一分钟认识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. 用途稍有不同:|| 是逻辑运算符偏向逻辑处理, ??主要为了简化代码
相关推荐
To_OC7 小时前
LC 128 最长连续序列:别上来就排序,O (n) 解法才是这题的灵魂
javascript·算法·leetcode
IT_陈寒11 小时前
Vue这个坑我跳了两次,原来问题出在这
前端·人工智能·后端
kyriewen11 小时前
我用 50 行代码重写了 React Router 核心,终于搞懂了前端路由原理
前端·javascript·react.js
人活一口气12 小时前
Spring Boot与AIGC的完美结合:从零搭建智能内容生成平台
java·spring boot·aigc
WebInfra12 小时前
Rspack 2.1 发布:React Compiler 提速 10 倍!
前端
李明卫杭州12 小时前
CSS 媒体查询详解:一文掌握响应式设计的核心技术
前端
lichenyang45313 小时前
从 H5 按钮到 OpenHarmony 能力调用:我如何理解 ASCF 的运行链路
前端
下家13 小时前
我放弃了 Vue/React,选择自研框架
前端·前端框架
Asize14 小时前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
像我这样帅的人丶你还14 小时前
Java 后端详解(三):全局异常处理与 JPA 数据库映射
java·后端