空值合并运算符真实使用场景及避坑

简介: 在 JS 里,我们要判断一个数值非空,常常需要运用下面的两个不等表达式进行判断,所以我一值有个疑惑,为什么不出一个同时判断不为 undefined 和 null 的方法

在 JS 里,我们要判断一个数值非空,常常需要运用下面的两个不等表达式进行判断,所以我一值有个疑惑,为什么不出一个同时判断不为 undefined 和 null 的方法

if (variable !== undefined && variable !== null) {
  // to do something
}


所以官方在 ES2020 版本里就出了一个叫“空值合并运算符”的东西,官方的解释是:

空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。


它的一个实际业务应用场景是我们在判断输入框中的值为有效值时,进行一些其它的操作,以前我们通常需要这样做:

if(value !== null && value !== undefined && value !== ''){
    // to do something
}


而有了空值合并运算符,只需要:

if(value ?? '' !==  ''){
  // to do something
}


还有个应用场景是当我们给某个变量赋默认值的时候,以前通常的做法是使用逻辑或操作符(||):

let link;
// 由于link做了变量声明,但并未赋值,所以为 undefined
let location = link || 'http://i-fanr.com';


然而,由于 || 是一个布尔逻辑运算符,左侧的操作数会被强制转换成布尔值用于求值。任何假值(0, '',NaN, null,undefined)都不会被返回。这导致如果你使用 0,'' 或 NaN 作为有效值,就会出现不可预料的后果。

let link = '';
// 由于link做了变量声明,但并未赋值,所以为 undefined
let location = link || 'http://i-fanr.com';
console.log(location) // 返回的是 ‘http://i-fanr.com’,而不是''


空值合并操作符可以避免这种陷阱,其只在第一个操作数为null 或 undefined 时(而不是其它假值)返回第二个操作数。

let link = '';
// 由于link做了变量声明,但并未赋值,所以为 undefined
let location = link ?? 'http://i-fanr.com';
console.log(location) // 返回的是 ''




目录
相关文章
|
前端开发 微服务
Element-Plus 图标自动导入
Element-Plus 图标自动导入
|
存储 关系型数据库 数据库
深入了解 PostgreSQL:功能、特性和部署
PostgreSQL,通常简称为Postgres,是一款强大且开源的关系型数据库管理系统(RDBMS),它在数据存储和处理方面提供了广泛的功能和灵活性。本文将详细介绍 PostgreSQL 的功能、特性以及如何部署和使用它。
1640 1
深入了解 PostgreSQL:功能、特性和部署
|
存储 前端开发 API
基于SpringBoot+Vue的智能在线考试系统的设计与实现
基于SpringBoot+Vue的智能在线考试系统的设计与实现
4532 0
|
数据可视化 Linux Go
Docker容器命令行可视化工具-Lazydocker
Lazydocker-专为懒人设计的容器命令行可视化交互式工具
2221 0
Docker容器命令行可视化工具-Lazydocker
|
Web App开发 移动开发 小程序
扫普通链接二维码打开小程序的踩坑过程...
扫普通链接二维码打开小程序的踩坑过程...
5966 0
扫普通链接二维码打开小程序的踩坑过程...
|
移动开发 Android开发 iOS开发
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
4751 0
IEEE 754规格化浮点数所能表示的最大值和最小值
IEEE 754规格化浮点数所能表示的最大值和最小值
5735 1
IEEE 754规格化浮点数所能表示的最大值和最小值
|
JavaScript
【vue】 vue-seamless-scroll 无缝滚动依赖
【vue】 vue-seamless-scroll 无缝滚动依赖
2469 1
|
Ubuntu 编译器 Linux
go语言中SQLite3驱动安装
【11月更文挑战第2天】
792 7
|
开发工具 开发者 iOS开发
如果苹果上架审核7个工作日仍无反应如何向苹果官方询问进度和提交反馈-App Store Connect方式和发送邮件询问方式-优雅草卓伊凡
如果苹果上架审核7个工作日仍无反应如何向苹果官方询问进度和提交反馈-App Store Connect方式和发送邮件询问方式-优雅草卓伊凡
5406 2
如果苹果上架审核7个工作日仍无反应如何向苹果官方询问进度和提交反馈-App Store Connect方式和发送邮件询问方式-优雅草卓伊凡