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

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




目录
相关文章
|
2月前
|
机器学习/深度学习 数据可视化 数据挖掘
数据集中存在大量重复值时,如何选择合适的分析方法?
总之,当数据集中存在大量重复值时,需要综合考虑各种分析方法的特点和适用范围,根据具体的分析目标和数据情况选择合适的方法,或者结合多种方法进行综合分析,以获得准确、可靠的分析结果。
53 9
|
8月前
【全网最简短代码】筛选出新数组中和旧数组的重复项,并和旧数组合并(往数组追加新的数据对象且去重,合并两个数组不重复数据)
【全网最简短代码】筛选出新数组中和旧数组的重复项,并和旧数组合并(往数组追加新的数据对象且去重,合并两个数组不重复数据)
|
运维 Shell Python
【运维知识高级篇】超详细的Shell编程讲解2(变量切片+统计变量长度+字串删除+字串替换+七种方法进行数值运算+整数比较+多整数比较+文件判断+字符串比对+正则比对+配合三剑客的高阶用法)(一)
【运维知识高级篇】超详细的Shell编程讲解2(变量切片+统计变量长度+字串删除+字串替换+七种方法进行数值运算+整数比较+多整数比较+文件判断+字符串比对+正则比对+配合三剑客的高阶用法)
140 0
|
8月前
|
Java
逃逸分析和标量替换技术,你明白了吗
逃逸分析和标量替换技术,你明白了吗
102 0
|
运维 Shell Perl
【运维知识高级篇】超详细的Shell编程讲解2(变量切片+统计变量长度+字串删除+字串替换+七种方法进行数值运算+整数比较+多整数比较+文件判断+字符串比对+正则比对+配合三剑客的高阶用法)(二)
【运维知识高级篇】超详细的Shell编程讲解2(变量切片+统计变量长度+字串删除+字串替换+七种方法进行数值运算+整数比较+多整数比较+文件判断+字符串比对+正则比对+配合三剑客的高阶用法)(二)
138 0
|
前端开发
前端学习案例16-隐式类型转换-16 原
前端学习案例16-隐式类型转换-16 原
83 0
前端学习案例16-隐式类型转换-16 原
|
前端开发
前端学习案例4-隐式类型转换-4 原
前端学习案例4-隐式类型转换-4 原
75 0
前端学习案例4-隐式类型转换-4 原
|
前端开发
前端学习案例15-隐式类型转换-15 原
前端学习案例15-隐式类型转换-15 原
69 0
前端学习案例15-隐式类型转换-15 原
|
JavaScript 前端开发
#yyds干货盘点#【js学习笔记六】数组双重去重的方式五对象属性去重
#yyds干货盘点#【js学习笔记六】数组双重去重的方式五对象属性去重
126 0
#yyds干货盘点#【js学习笔记六】数组双重去重的方式五对象属性去重
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记一】数组双重去重的方式一循环法去重
#yyds干货盘点# 【js学习笔记一】数组双重去重的方式一循环法去重
126 0
#yyds干货盘点# 【js学习笔记一】数组双重去重的方式一循环法去重