JavaScript空值合并运算符
今年ECMAScript[1] 2020(ES2020)将发布!自 2015 年 ECMAScript 2015(ES6)发布以来,我们每年都对 JavaScript 语言进行更新。
❝「目录」
- 使用 JavaScript 空值合并运算符
- 使用实例
- 空值合并运算符与逻辑或(
||
) - 浏览器支持
- 总结
❞
在ES2020中,我们获得了在其他语言中( 如 C# 和 PHP)早已可用的功能:空值合并运算符[2]。我一直喜欢这个名字,因为每当我说这个名字时,都会觉得自己很聪明。?
❝空值合并运算符将会遍历列表,并返回第一个不是 null[3] 或 undefined[4] 的值。 ❞
重要的是要注意,空值合并运算符仅查找 null
或 null
值。空值合并运算符接受虚值(Falsy values[5])。
使用 JavaScript 空值合并运算符
让我们看一些例子。请记住,JavaScript 的空值合并运算符将遵循 ??
链,直到找到「非空或未定义」的对象。如果找到 false
,它将返回该值。
null ?? 'hi' // 'hi'
undefined ?? 'hey' // 'hey'
false ?? 'hola' // false
0 ?? 'bonjour' // 0
'first' ?? 'second' // first
在下面的例子中,我们在变量中存储了一些值:
let person // <-- person is undefined here
person ?? { name: 'chris' } // { name: 'chris' }
const isActive = false
isActive ?? true // false
链接 JavaScript 的空值合并运算符
JavaScript 的空值合并运算符的妙处在于,我们可以根据需要将其进行多次链接。
null ?? undefined ?? false ?? 'hello' // false
null ?? '' ?? 'hello' // ''
使用实例
可以在从外部来源获取数据时使用。比如我们想从多个地方抓取博客的文章。然后可以确定哪个文章将会成为我们的精选帖子:
// 简化代码。 使用 fetch requires 需要比这更多的代码
const firstBlogPost = await fetch('...')
const secondBlogPost = await fetch('...')
const defaultBlogPost = { title: 'Default Featured Post' }
const featuredBlogPost = firstBlogPost ?? secondBlogPost ?? defaultBlogPost
如果不确定某些值是否存在,上面是设置默认值的好方法。
空合并运算符与逻辑或(||
)
如果要消除虚值,可以用 逻辑或运算符[6] (||
)。
❝本质上,它与空合并运算符的作用相同,只是它消除了虚值。 ❞
- 空值合并运算符将跳过
null
,undefined
- 逻辑或运算符会跳过
null
,undefined
,false
false ?? 'hello' // false
false || 'hello' // 'hola'
如果你不想用要虚值,可以使用 ||
。如果只想检查是否为 null
或 undefined
,就用 ??
。
浏览器支持
在撰写本文时,最新版本的 Chrome、Firefox、Edge 和 Safari 可以使用空值合并运算符。
总结
空值合并运算符是该 JavaScript 语言不错的补充。拥有更多检查值的选择并没有什么坏处。
作者:Chris on Code 翻译:疯狂的技术宅 原文:https://scotch.io/tutorials/javascripts-null-coalescing-operator
Reference
[1]
ECMAScript: https://en.wikipedia.org/wiki/ECMAScript
[2]
空值合并运算符: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
[3]
null: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null
[4]
undefined: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined
[5]
Falsy values: https://guide.freecodecamp.org/javascript/falsy-values/
[6]
逻辑或运算符: https://mariusschulz.com/blog/the-and-and-or-operators-in-javascript
- Spring Boot 中使用 Kafka
- 如何评价一段代码
- java系统高并发的解决方案
- Spring Boot 中使用 Redis
- 使用 Jedis 连接操作 Redis
- 浅析ReDoS的原理与实践
- 使用 Executors,ThreadPoolExecutor,创建线程池,源码分析理解
- CentOS+Nginx+Tomcat搭建高性能负载均衡集群
- Java 四种线程池的使用
- 搭建 Jenkins-2.83 服务,部署 spring boot 项目
- Spring Boot 中使用 Java API 调用 lucene
- Spring Boot 中使用 Java API 调用 Elasticsearch
- Spring Boot 中使用 公共配置
- WebView 和 JS 交互,如何将 Java 对象和 List 传值给 JS ?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法