JS的空值合并运算符(??)的使用

 更新时间:2023年12月04日 12:01:02   作者:田本初  
空值合并运算符是一个逻辑运算符,当左侧的操作数为null或undefined时,会返回右侧操作数,否则返回左侧操作数,本文就来详细的介绍一下如何使用

前言

空值合并运算符(??)是一个逻辑运算符,当左侧的操作数为nullundefined时,会返回右侧操作数,否则返回左侧操作数。

与逻辑或运算符(||)的区别

逻辑或运算符(||)是一个布尔逻辑运算符,即当左侧操作数会被强制转为布尔值,所有假值(“”,0,NaN,null,undefined)都会隐式转换为false时,此时会返回右侧操作数。可是当 0,""和NaN 需要当做有效值时,逻辑或运算符(||)会导致以下错误:

let count = 0;
let text = "";

let res = count || 42;
let message = text || "hi!";
console.log(res); // 42,而不是 0
console.log(message); // "hi!",而不是 ""

相比逻辑或运算符(||),空值合并运算符(??),如果左侧操作数为0,“”,NaN,也会被返回。

let count = 0;
let text = "";

let res = count ?? 42;
let message = text ?? "hi!";
console.log(res); // 0
console.log(message); // ""

总结

当你需要 0,""和NaN 作为有效值时,使用空值合并运算符(??),否则使用逻辑或运算符(||)。

与 OR(||) 和 AND(&&) 运算符

与 OR 和 AND 逻辑运算符相似,当左表达式不为 null 或 undefined 时,短路,不会对右表达式进行求值。

function A() {
  console.log("函数 A 被调用了");
  return undefined;
}
function B() {
  console.log("函数 B 被调用了");
  return false;
}
function C() {
  console.log("函数 C 被调用了");
  return "foo";
}

console.log(A() ?? C());
// 依次打印 "函数 A 被调用了"、"函数 C 被调用了"、"foo"
// A() 返回了 undefined,所以运算符两边的表达式都被执行了

console.log(B() ?? C());
// 依次打印 "函数 B 被调用了"、"false"
// B() 返回了 false(既不是 null 也不是 undefined)
// 所以右侧表达式没有被执行

不能与 OR 和 AND 运算符共用

?? 不能与 AND(&&)和 OR(||)运算符组合使用。会抛出语法错误(因为空值合并运算符和其他逻辑运算符之间的运算优先级/运算顺序是未定义的)。

错误写法:

null || undefined ?? "666"; // 抛出 SyntaxError
true || undefined ?? "666"; // 抛出 SyntaxError

但是,如果配合括号来显示表明运算优先级,是可行的。

(null || undefined) ?? "666"; // 返回 "666"

实例

const nullValue = null;
const emptyText = ""; // 空字符串,是一个假值,Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""(空字符串虽然是假值,但不是 null 或者 undefined)
console.log(valC); // 42

使用场景

antd组件库

select组件的placeholder属性,只有当值为null或undefined时才会展示,如果 0,""和NaN 为有效值,空值合并运算符(??)就适用于判断value。

如上只是一个简单举例,空值合并运算符(??)适用于一切 0,""和NaN 为有效值的场景。

到此这篇关于JS的空值合并运算符(??)的使用的文章就介绍到这了,更多相关JS 空值合并运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap3 Grid system原理及应用详解

    Bootstrap3 Grid system原理及应用详解

    这篇文章主要为大家详细介绍了Bootstrap3 Grid system原理及应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript前端实现多视频上传

    javascript前端实现多视频上传

    这篇文章主要为大家详细介绍了javascript前端实现多视频上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • js实现禁止中文输入的方法

    js实现禁止中文输入的方法

    这篇文章主要介绍了js实现禁止中文输入的方法,需要的朋友可以参考下
    2015-01-01
  • JS回调函数原理与用法详解【附PHP回调函数】

    JS回调函数原理与用法详解【附PHP回调函数】

    这篇文章主要介绍了JS回调函数原理与用法,结合实例形式详细分析了JavaScript回调函数的概念、原理、用法,并给出了PHP回调函数的使用示例,需要的朋友可以参考下
    2019-07-07
  • 不要在cookie中使用特殊字符的原因分析

    不要在cookie中使用特殊字符的原因分析

    参数name需要遵循规范RFC2109,也就是说name参数只能包含字母或者数字,不能包含逗号、分号、空格及美元符号。cookie的name属性设置之后不能被修改。
    2010-07-07
  • js 实现 input type="file" 文件上传示例代码

    js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑、浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能
    2013-08-08
  • 微信小程序实现搜索功能

    微信小程序实现搜索功能

    这篇文章主要介绍了微信小程序实现搜索功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 如何利用JavaScript读取excel文件并绘制echarts图形

    如何利用JavaScript读取excel文件并绘制echarts图形

    这篇文章主要介绍了如何利用JavaScript读取excel文件并绘制echarts图形,文章通过excel财务报表,并且需要根据这张excel表绘制成各种echarts图形,需要了解更多详情的小伙伴可以参考一下文章内内容
    2022-05-05
  • 微信小程序 函数防抖 解决重复点击消耗性能问题实现代码

    微信小程序 函数防抖 解决重复点击消耗性能问题实现代码

    这篇文章主要介绍了微信小程序使用函数防抖解决重复点击消耗性能问题实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS运动特效之同时运动实现方法分析

    JS运动特效之同时运动实现方法分析

    这篇文章主要介绍了JS运动特效之同时运动实现方法,结合实例形式分析了javascript同时运动的原理与相关实现技巧,需要的朋友可以参考下
    2018-01-01

最新评论