ES2020系列之空值合并运算符 '??'


Posted in Javascript onJuly 22, 2020

空值合并运算符 ?? 提供了一种简短的语法,用来获取列表中第一个“已定义”的变量(译注:即值不是 null 或 undefined 的变量)。

a ?? b 的结果是:

  • a,如果 a 不是 null 或 undefined,
  • b,其他情况。

所以,x = a ?? b 是下面这个表达式的简写:

x = (a !== null && a !== undefined) ? a : b;

下面是一个更长一点的例子。

假设,我们有一个用户,变量 firstName、lastName 和 nickName 分别对应用户的名字、姓氏和昵称。如果用户决定不输入任何值,那么这些变量都可能是未定义的。

我们想要显示用户的名称:显示这三个变量中的一个,如果都没有设置值,则显示 "Anonymous"。
让我们使用 ?? 运算符选择第一个已定义的变量:

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 显示第一个不是 null/undefined 的值
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

与 || 比较

或运算符 || 可以与 ?? 运算符以同样的方式使用。正如 上一章 所讲的,我们可以用 || 替换上面示例中的 ??,也可以获得相同的结果。

重要的区别是:

  • || 返回第一个 真 值。
  • ?? 返回第一个 已定义的 值。

当我们想将 null/undefined 与 0 区别对待时,这个区别至关重要。

例如,考虑下面这种情况:

height = height ?? 100;

如果 height 未定义,则将其赋值为 100。

让我们将其与 || 进行比较:

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

在这个例子中,height || 100 将值为 0 的 height 视为未设置的(unset),与 null、undefined 以及任何其他假(falsy)值同等对待。因此得到的结果是 100。

height ?? 100 仅当 height 确实是 null 或 undefined 时才返回 100。因此,alert 按原样显示了 height 值 0。

哪种行为更好取决于特定的使用场景。当高度 0 为有效值时,?? 运算符更适合。

优先级

?? 运算符的优先级相当低:在 MDN table 中为 5。

因此,?? 在大多数其他运算之后,但在 = 和 ? 之前进行运算。

如果我们需要在复杂表达式中使用 ?? 进行取值,需要考虑加括号:

let height = null;
let width = null;

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

alert(area); // 5000

否则,如果我们省略了括号,* 的优先级比 ?? 高,会优先执行。

运算过程将等同于下面这个表达式:

// 可能不正确的
let area = height ?? (100 * width) ?? 50;

这里还有一个相关的语言级别的限制。

出于安全原因,禁止将 ?? 运算符与 && 和 || 运算符一起使用。

下面的代码会触发一个语法错误:

let x = 1 && 2 ?? 3; // Syntax error

这个限制无疑是值得商榷的,但是它被添加到语言规范中是为了避免编程错误,因为人们开始使用 ?? 替代 ||。

可以明确地使用括号来解决这个问题:

let x = (1 && 2) ?? 3; // 起作用

alert(x); // 2

总结

空值合并运算符 ?? 提供了一种简洁的方式获取列表中“已定义”的值。

它被用于为变量分配默认值:

// 当 height 的值为 null 或 undefined 时,将 height 的值设置为 100
height = height ?? 100;

?? 运算符的优先级非常低,只略高于 ? 和 =。

如果没有明确添加括号,不能将其与 || 或 && 一起使用。

到此这篇关于ES2020系列之空值合并运算符 '??'的文章就介绍到这了,更多相关ES2020 空值合并运算符 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 #Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 #Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 #Javascript
vue 弹出遮罩层样式实例
Jul 22 #Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 #Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 #Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 #Javascript
You might like
PHP中PDO基础教程 入门级
2011/09/04 PHP
php url路由入门实例
2014/04/23 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
电子商务专业推荐信范文
2013/12/02 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
创业计划书之干洗店
2019/09/10 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python