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

合并空值运算符??

一、介绍

合并空值运算符与null和undefined相似,可以理解为当一个值既不是null或undefined时,我们将其称为’已定义的defined’。

a ?? b的结果是:
● 如果a是已定义的,那么结果就是a,
● 如果a不是已定义的,那么结果就是b

如果第一个参数不是null或undefined,那么??返回第一个参数。否则返回第二个参数。
例如,我们用已知的三目运算符来执行一下:

result =(a!==null && a!==undefined) ?a:b //那么就可以简写成 a??b 来判断a是否是一个未定义的值

使用场景:
在这里,如果 user 的值不为 null/undefined 则显示 user,否则显示 匿名:

let user;
alert(user ?? "匿名"); //'匿名'

在下面这个例子中,我们将一个名字赋值给了 user:

let user = '张三'
alert(user ?? "匿名"); //张三

我们还可以从一系列的值中选择出第一个已定义的值(非 null/undefined 的值)。

let firstName = null;
let lastName = null;
let nickName = "张三"
//显示第一个已定义的值
alert(firstName ?? lastName ?? nickName ?? "匿名" ) //张三

二、与 || 比较

或运算符 || 可以以与 ?? 运算符相同的方式使用。

let firstName = null;
let lastName = null;
let nickName = "张三"
//显示第一个已定义的值
alert(firstName || lastName || nickName || "匿名" ) //张三

区别:
| | :返回第一个 真 值
? ? :返回第一个 已定义的 值

|| 无法区分 false、0、空字符串 “” 和 null/undefined。它们都一样 —— 假值(falsy values)。如果其中任何一个是 || 的第一个参数,那么我们将得到第二个参数作为结果。
不过在实际中,我们可能只想在变量的值为 null/undefined 时使用默认值。也就是说,当该值确实未知或未被设置时。

let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0
  1. height || 100 首先检查是否是一个假值,height为0,是假值,所以||运算符返回的是100、
  2. height ?? 100首先检查height是否为null/undefined,height为0,不是null/undefined,所以结果为height的原始值0

小节:实际上,高度 0 通常是一个有效值,它不应该被替换为默认值。所以 ?? 运算得到的是正确的结果。

三、优先级

?? 运算符的优先级与 || 相同,它们的优先级都为 3,详见:MDN。
这意味着,就像 || 一样,空值合并运算符在 = 和 ? 运算前计算,但在大多数其他运算(例如 + 和 *)之后计算。
// 所以我们可能需要在这样的表达式中添加括号:

let height = null;
let width = null;

// 重要:使用括号
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

否则,如果我们省略了括号,则由于 * 的优先级比 ?? 高,它会先执行,进而导致错误的结果。\

// 没有括号
let area = height ?? 100 * width ?? 50;

// ……将这样计算(不符合我们的期望):
let area = height ?? (100 * width) ?? 50;

?? 与 && 或 || 一起使用
出于安全原因,JavaScript 禁止将 ?? 运算符与 && 和 || 运算符一起使用,除非使用括号明确指定了优先级。

//会触发错误
let x = 1 && 2 ?? 3; // Syntax error

这个限制无疑是值得商榷的,它被添加到语言规范中是为了避免人们从 || 切换到 ?? 时的编程错误。
可以明确地使用括号来解决这个问题:

let x = (1 && 2) ?? 3; // 正常工作了
alert(x); // 2

四、总结

  1. 合并空值运算符提供一种从列表中选择第一个"已定义"的值的简便方式,用于为变量分配默认值。
  2. ?? 运算符的优先级非常低,仅略高于 ? 和 =,因此在表达式中使用它时请考虑添加括号。
  3. 如果没有明确添加括号,不能将其与 || 或 && 一起使用。
http://www.dtcms.com/a/107513.html

相关文章:

  • 爬虫【Scrapy框架的概念与执行流程】
  • c++中%符号使用的注意事项/易错点
  • limma差异分析
  • Scala面向对象
  • 多层内网渗透测试虚拟仿真实验环境(Tomcat、ladon64、frp、Weblogic、权限维持、SSH Server Wrapper后门)
  • 鸿蒙开发_TS快速入门_TS中模块化操作_模块的导入导出---纯血鸿蒙HarmonyOS5.0工作笔记008
  • MySQL主从复制(三)
  • 【Axure元件分享】时间范围选择器
  • 阿里云国际站代理商:模型训练中断数据丢失怎么办?
  • DAY 34 leetcode 349--哈希表.两个数组的交集
  • 【Linux网络与网络编程】04.TCP Socket编程
  • BUUCTF-web刷题篇(7)
  • 软件工程面试题(二十四)
  • 【C++重点】deque
  • linux内核漏洞检测利用exp提权
  • Echarts 地图下钻实现过程记录
  • Bootstrap 表格:高效布局与动态交互的实践指南
  • Java8 到 Java21 系列之 Lambda 表达式:函数式编程的开端(Java 8)
  • 深入剖析 Hive Fetch 抓取机制:原理、优化与实践
  • 【Axure元件分享】月份范围选择器
  • msvcr110.dll丢失的几种修复方法指南,msvcr110.dll是什么文件
  • 第四章、Isaacsim在GUI中构建机器人(2):组装一个简单的机器人
  • 10.使用路由缓存提升性能
  • DHT11数字温湿度传感器驱动开发全解析(下) | 零基础入门STM32第八十八步
  • emqx中LwM2M
  • 第七天 - re正则表达式模块 - 日志文件模式匹配 - 练习:Nginx日志分析器
  • 企业数据治理实践:“七剑” 合璧,释放数据价值
  • python string 类型字符拼接 +=的缺点,以及取代方法
  • python/pytorch杂聊
  • Nature旗下 | npj Digital Medicine | 图像+转录组+临床变量三合一,多模态AI预测化疗反应,值得复现学习的完整框架