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 空值合并运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript面试之如何实现数组拍平(扁平化)方法

    JavaScript面试之如何实现数组拍平(扁平化)方法

    数组扁平化是指将一个多维数组变为一维数组,下面这篇文章主要给大家介绍了关于JavaScript面试之如何实现数组拍平(扁平化)方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-11-11
  • JavaScript设计模式之构造函数模式实例教程

    JavaScript设计模式之构造函数模式实例教程

    这篇文章主要介绍了JavaScript设计模式之构造函数模式,结合实例形式分析了构造函数模式的概念、功能、定义及使用方法,需要的朋友可以参考下
    2018-07-07
  • layui扩展上传组件模拟进度条的方法

    layui扩展上传组件模拟进度条的方法

    今天小编就为大家分享一篇 layui扩展上传组件模拟进度条的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • echarts环形图内部圆、外部圆形及阴影设置方法

    echarts环形图内部圆、外部圆形及阴影设置方法

    近期要做图表,我选择了ECharts做可视化图表,图表的样式有阴影,这篇文章主要给大家介绍了关于echarts环形图内部圆、外部圆形及阴影设置的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 精通JavaScript的this关键字

    精通JavaScript的this关键字

    这篇文章主要介绍了JavaScript的this关键字,真正帮助大家做到精通this关键字,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 浅析如何在Bash中调用Node运行JS文件进行数据通信

    浅析如何在Bash中调用Node运行JS文件进行数据通信

    这篇文章主要来和大家探讨在 Bash 中调用 Node 运行 JS 文件时如何进行数据通信,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • BootStrap table删除指定行的注意事项(笔记整理)

    BootStrap table删除指定行的注意事项(笔记整理)

    在前端开发中遇到这样的问题,对于table指定行的数据进行删除,花了好长时间才解决,今天小编抽时间给大家介绍BootStrap table删除指定行的注意事项,需要的朋友参考下吧
    2017-02-02
  • JS实现点击上移下移LI行数据的方法

    JS实现点击上移下移LI行数据的方法

    这篇文章主要介绍了JS实现点击上移下移LI行数据的方法,涉及javascript针对LI列表动态排序的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 原生JS实现图片左右轮播

    原生JS实现图片左右轮播

    本文主要分享了原生JS实现图片左右不停运动的完整示例代码,可直接保存到HTML文档打开可以查看效果。下面跟着小编一起来看下吧
    2016-12-12
  • BootStrap3中模态对话框的使用

    BootStrap3中模态对话框的使用

    这篇文章主要介绍了BootStrap3中模态对话框的使用的相关资料,需要的朋友可以参考下
    2017-01-01

最新评论