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

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

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

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''NaNnullundefined)都不会被返回。这导致如果你使用 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) // 返回的是 ''




目录
相关文章
|
11月前
|
存储 JSON 安全
Go语言类型分支大法秒杀一切未知类型!
Go语言类型分支大法秒杀一切未知类型!
46 0
|
1月前
|
Java 开发者
在Java编程中,if-else与switch作为核心的条件控制语句,各有千秋。if-else基于条件分支,适用于复杂逻辑;而switch则擅长处理枚举或固定选项列表,提供简洁高效的解决方案
在Java编程中,if-else与switch作为核心的条件控制语句,各有千秋。if-else基于条件分支,适用于复杂逻辑;而switch则擅长处理枚举或固定选项列表,提供简洁高效的解决方案。本文通过技术综述及示例代码,剖析两者在性能上的差异。if-else具有短路特性,但条件增多时JVM会优化提升性能;switch则利用跳转表机制,在处理大量固定选项时表现出色。通过实验对比可见,switch在重复case值处理上通常更快。尽管如此,选择时还需兼顾代码的可读性和维护性。理解这些细节有助于开发者编写出既高效又优雅的Java代码。
24 2
|
2月前
|
SQL 运维 分布式计算
DataWorks产品使用合集之ODPPS中如何使用SQL查询从表中获取值并将其赋值给临时变量以供后续使用
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
|
4月前
|
算法 数据处理 Python
Python技术分享:如何将数据列表中的空值补0
Python技术分享:如何将数据列表中的空值补0
53 1
|
4月前
|
分布式计算 大数据 专有云
MaxCompute产品使用合集之需要将多个字段concat起来,有时候遇到null值,该怎么做
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
|
4月前
|
Java
基本概念【算术、 关系、逻辑、位、字符串、条件、优先级等运算符】(三)-全面详解(学习总结---从入门到深化)
基本概念【算术、 关系、逻辑、位、字符串、条件、优先级等运算符】(三)-全面详解(学习总结---从入门到深化)
52 0
|
11月前
|
存储 程序员 C语言
c++ 如何做出实现一组数据的实际索引
c++ 如何做出实现一组数据的实际索引
|
11月前
|
安全 Go
Go语言字典无限进化,实现可存任意类型值!
Go语言字典无限进化,实现可存任意类型值!
61 0
|
存储 程序员 C语言
c++ 如何做出实现一组数据的实际索引
C++是一种计算机高级程序设计语言, 由​​C语言​​​扩展升级而产生 , 最早于1979年由​​本贾尼·斯特劳斯特卢普​​在AT&T贝尔工
|
前端开发
前端学习案例16-隐式类型转换-16 原
前端学习案例16-隐式类型转换-16 原
71 0
前端学习案例16-隐式类型转换-16 原