ECMAScript 2020 的 Nullish Coalescing 运算符详解及应用场景

ECMAScript 2020 中引入了 Nullish Coalescing 运算符,它可以帮助我们更方便地处理 null 或 undefined 的情况。在本文中,我们将对 Nullish Coalescing 运算符进行详细的介绍,并讨论它的应用场景。

Nullish Coalescing 运算符

Nullish Coalescing 运算符是双问号运算符(??),它可以用来判断一个变量是否为 null 或 undefined,并在变量为 null 或 undefined 时返回一个默认值。它的语法如下:

----- ------ - -------- -- -------------

其中,variable 是要进行判断的变量,defaultValue 是默认值。如果 variable 的值为 null 或 undefined,则返回 defaultValue,否则返回 variable 的值。

与传统的逻辑或运算符(||)不同,Nullish Coalescing 运算符只在变量为 null 或 undefined 时返回默认值,而不是在变量为假值时返回默认值。例如:

----- - - -----
----- - - ----------
----- - - --
----- - - ---

------------- -- ----------- -- ---------
------------- -- ----------- -- ---------
------------- -- ----------- -- -
------------- -- ----------- -- ---------

------------- -- ----------- -- ---------
------------- -- ----------- -- ---------
------------- -- ----------- -- -
------------- -- ----------- -- --

在上面的例子中,a 和 b 的值为 null 和 undefined,使用逻辑或运算符时都会返回默认值。而使用 Nullish Coalescing 运算符时,它们也会返回默认值。而 c 和 d 的值为 0 和空字符串,使用逻辑或运算符时只有空字符串会返回默认值,而使用 Nullish Coalescing 运算符时都不会返回默认值。

应用场景

Nullish Coalescing 运算符可以用来处理许多场景,例如:

1. 设置默认值

当我们需要设置一个变量的默认值时,可以使用 Nullish Coalescing 运算符。例如:

----- ---- - --------- -- --------

在上面的例子中,如果 getName() 返回 null 或 undefined,则 name 的值将被设置为 'Guest'。

2. 避免错误

在访问对象属性或数组元素时,如果对象或数组不存在,会抛出错误。可以使用 Nullish Coalescing 运算符来避免这种错误。例如:

----- ------ - -
  ----- -------
  ---- --
--

----- ---- - -------------------- -- ----------

在上面的例子中,如果 person 对象没有 address 属性,或 address 属性的值为 null 或 undefined,则 city 的值将被设置为 'Unknown'。

3. 链式调用

在链式调用中,如果中间的对象不存在,会抛出错误。可以使用 Nullish Coalescing 运算符来避免这种错误。例如:

----- ------ - --------------------- -- ----------

在上面的例子中,如果 person 对象或 address 属性不存在,或它们的值为 null 或 undefined,则 result 的值将被设置为 'Unknown'。

总结

Nullish Coalescing 运算符是 ECMAScript 2020 中引入的新运算符,它可以帮助我们更方便地处理 null 或 undefined 的情况。它与传统的逻辑或运算符不同,只在变量为 null 或 undefined 时返回默认值。Nullish Coalescing 运算符可以用来设置默认值、避免错误和链式调用等场景。在实际开发中,我们应该根据具体情况灵活使用。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/658e4cb6eb4cecbf2d41ba34


猜你喜欢

  • React Native 中使用 WebSocket 实现服务器与客户端通信

    WebSocket 是一种在 Web 网络上实现双向通信的技术,它允许服务器和客户端之间建立持久性的连接,并允许双方彼此发送消息。在 React Native 中,我们可以使用 WebSocket 实...

    10 个月前
  • 如何去掉 CSS Reset 中的不必要的样式

    CSS Reset 是一种优秀的前端开发技术,它帮助我们去除浏览器默认的样式,让我们更加轻松地实现页面设计。但是部分 CSS Reset 中会加入一些不必要的样式,这些样式带来的影响可能会导致我们的设...

    10 个月前
  • 解决 Safari 浏览器上无法运行 ECMAScript 2017 代码的问题

    在前端开发中,我们常常会使用 ECMAScript 2017(ES2017)的新特性来提高代码的效率和可读性。然而,在某些情况下,我们会发现使用 ES2017 编写的代码在 Safari 浏览器上无法...

    10 个月前
  • 如何使用 Promise.all 对分页数据进行异步请求

    在开发前端应用程序时,经常需要从后端服务器获取分页数据。通常情况下,我们需要向服务器进行多次异步请求,以获取所有分页数据。在这篇文章中,我们将介绍如何使用 Promise.all 对分页数据进行异步请...

    10 个月前
  • LESS 中多重嵌套规则优化技巧

    LESS 是一种动态样式表语言,与 CSS 相比,LESS 具有更丰富的语法,支持变量、运算、函数、Mixin 等功能,可以提高前端开发的效率和代码的可重用性。其中,多重嵌套规则是 LESS 中常用的...

    10 个月前
  • socket.io 出现奇怪的断线问题怎么办?

    在前端开发中,使用 socket.io 可以方便地实现实时通信,但有时我们可能会遇到一些奇怪的断线问题,例如连接不稳定,断开连接时无法立即重新连接等,接下来我们将介绍针对这些问题的解决方法。

    10 个月前
  • RESTful API 实现 WebSocket 通信的技巧

    WebSocket 是一种能够在客户端和服务器之间实现双向通信的协议。它使用 HTTP(或 HTTPS)协议建立连接,然后通过套接字进行数据交换,相比于 HTTP 协议的请求—响应模式,WebSock...

    10 个月前
  • PM2 部署 Socket.io 应用:实现与客户端的双向通信

    前言 Socket.io 是一个面向实时 Web 应用的库,它提供了双向通信的能力,使服务器可以主动推送消息给客户端,而不再需要客户端通过轮询等方式不断查询服务器。

    10 个月前
  • 在 Angular 项目中快速实现基于 Material Design 的 UI

    前言 Angular 是目前非常流行的一种前端框架,它能帮助前端开发者快速构建复杂单页应用程序。而 Material Design,是一种被 Google 推荐使用的 UI 设计规范,因为它能够为用户...

    10 个月前
  • 使用 Node.js 时遇到的跨域请求问题及解决方法

    在前端开发中,跨域请求是一个常见的问题。当我们使用 Node.js 构建应用程序时,也会遇到这个问题。本文将介绍在使用 Node.js 时遇到的跨域请求问题,并提供解决方法及示例代码。

    10 个月前
  • ECMAScript 2020 中的全局对象 globalThis 使跨平台封装更加优雅

    在今天的跨平台Web应用开发中,前端领域遭遇了不少挑战。其中一个问题是在不同的平台(如浏览器、Node.js等)上使用相同的代码。随着ECMAScript 2020中引入的全局对象globalThis...

    10 个月前
  • Redux 中支持多个数据源的解决方案及实现技巧

    Redux 是一个非常流行的前端状态管理工具,它可以帮助我们更好地组织和管理应用中的数据流。当我们需要处理多个数据源时,Redux 提供的默认方案可能会显得有些力不从心,但是,我们可以通过一些技巧来实...

    10 个月前
  • Sequelize 模型模块封装方法详解

    前言 在 Node.js 的 Web 应用程序中,通常需要通过数据库来存储和管理数据。而 Sequelize 是一款优秀的 Node.js ORM 库,通过它我们可以非常方便地实现与数据库的交互。

    10 个月前
  • SASS 中的 @function 语句介绍及使用方法

    SASS 中的 @function 语句介绍及使用方法 SASS (Syntactically Awesome Style Sheets),是 CSS 的一种预处理器,它可以让我们在编写样式时,更加简...

    10 个月前
  • 基于 Hapi 框架的 RESTful API 开发详解

    什么是 Hapi 框架 Hapi 是一款 Node.js 的 Web 应用框架,它是一个强大而灵活的工具,专注于构建可伸缩和安全的 Web 应用程序。Hapi 提供了很多功能,例如插件系统、输入验证、...

    10 个月前
  • Serverless 架构中如何进行性能测试

    简介 Serverless 架构在近年来备受关注,它为我们提供了更加便捷、灵活、高效的应用开发方式。然而,在使用 Serverless 架构开发应用的过程中,我们也需要面对一些性能问题。

    10 个月前
  • 响应式设计中的 viewport 适配方案及常见坑点

    前端开发中,响应式设计是必备技能。而在响应式设计中,viewport 适配就是一个至关重要的方面,因为它可以帮助我们处理移动设备和桌面设备之间的差异。 本文将介绍 viewport 适配的常见方案,并...

    10 个月前
  • Fastify 和 Kubernetes:如何部署到容器编排平台

    快速、低开销、开放式的Node.js Web框架Fastify已经引起了广泛的关注。 随着Kubernetes和容器化的流行,本文将向您展示如何将Fastify应用程序部署到Kubernetes集群中...

    10 个月前
  • 使用 Jest 对 React Native 应用进行 UI 测试的技巧

    React Native 是一种开源的跨平台移动应用程序框架,它使用 JavaScript 和 React 用于创建漂亮而快速的移动应用程序。在团队开发中,UI 测试是确保应用程序的质量和用户体验的关...

    10 个月前
  • MongoDB 查询数据时出现 regex too long 错误的分析和解决

    最近我在使用 MongoDB 进行数据查询时,出现了一个 "regex too long" 的错误提示。原来这个错误是因为 MongoDB 中使用的正则表达式匹配操作有长度限制,当正则表达式的长度超过...

    10 个月前

相关推荐

    暂无文章