网站建设资讯

NEWS

网站建设资讯

JavaScript的空值合并运算符是什么-创新互联

小编给大家分享一下JavaScript的空值合并运算符是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联专注于桦甸企业网站建设,响应式网站建设,电子商务商城网站建设。桦甸网站建设公司,为桦甸等地区提供建站服务。全流程定制网站开发,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

今年ECMAScript 2020(ES2020)将发布!自 2015 年 ECMAScript 2015(ES6)发布以来,我们每年都对 JavaScript 语言进行更新。

目录

  • 使用 JavaScript 空值合并运算符
  • 使用实例
  • 空值合并运算符与逻辑或(||
  • 浏览器支持
  • 总结

在ES2020中,我们获得了在其他语言中( 如 C# 和 PHP)早已可用的功能:空值合并运算符。我一直喜欢这个名字,因为每当我说这个名字时,都会觉得自己很聪明。

空值合并运算符将会遍历列表,并返回第一个不是  null  或  undefined 的值。

重要的是要注意,空值合并运算符仅查找nullnull 值。空值合并运算符接受虚值(Falsy values)。

使用 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

如果不确定某些值是否存在,上面是设置默认值的好方法。

空合并运算符与逻辑或(||

如果要消除虚值,可以用 逻辑或运算符 (||)。

本质上,它与空合并运算符的作用相同,只是它消除了虚值。
  • 空值合并运算符将跳过nullundefined
  • 逻辑或运算符会跳过nullundefinedfalse
false ?? 'hello'    // false
false || 'hello'    // 'hola'

如果你不想用要虚值,可以使用||。如果只想检查是否为nullundefined,就用??

浏览器支持

在撰写本文时,新版本的 Chrome、Firefox、Edge 和 Safari 可以使用空值合并运算符。

以上是“JavaScript的空值合并运算符是什么”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站名称:JavaScript的空值合并运算符是什么-创新互联
网站网址:http://cdweb.net/article/dhiosj.html