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

简介: 在 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) // 返回的是 ''




目录
相关文章
|
4月前
|
并行计算 监控 Serverless
函数计算操作报错合集之出现了设备不匹配的问题,该如何解决
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
|
5月前
|
监控 前端开发 Java
函数计算操作报错合集之报错CAExited,该如何处理
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
|
6月前
|
分布式计算 大数据 专有云
MaxCompute产品使用合集之需要将多个字段concat起来,有时候遇到null值,该怎么做
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
|
存储 程序员 C语言
c++ 如何做出实现一组数据的实际索引
c++ 如何做出实现一组数据的实际索引
|
存储 程序员 C语言
c++ 如何做出实现一组数据的实际索引
C++是一种计算机高级程序设计语言, 由​​C语言​​​扩展升级而产生 , 最早于1979年由​​本贾尼·斯特劳斯特卢普​​在AT&T贝尔工
|
前端开发
前端学习案例4-隐式类型转换-4 原
前端学习案例4-隐式类型转换-4 原
57 0
前端学习案例4-隐式类型转换-4 原
|
前端开发
前端学习案例16-隐式类型转换-16 原
前端学习案例16-隐式类型转换-16 原
76 0
前端学习案例16-隐式类型转换-16 原
|
前端开发
前端学习案例15-隐式类型转换-15 原
前端学习案例15-隐式类型转换-15 原
62 0
前端学习案例15-隐式类型转换-15 原
|
数据可视化
【数据篇】34 # 如何处理多元变量?
【数据篇】34 # 如何处理多元变量?
158 0
【数据篇】34 # 如何处理多元变量?
|
Go vr&ar 开发者
数组注意事项和细节(2)|学习笔记
快速学习数组注意事项和细节(2)。
129 0
数组注意事项和细节(2)|学习笔记