使用 ECMAScript 2019 的空位合并运算符

在 ECMAScript 2019 中,新增了一个空位合并运算符(nullish coalescing operator),它是一个双问号(??)符号。这个运算符的作用是当左侧表达式的结果为 null 或 undefined 时,才会返回右侧表达式的值。在本文中,我们将详细介绍这个运算符的用法和指导意义。

为什么需要空位合并运算符?

在 JavaScript 中,我们经常会遇到需要判断某个值是否为 null 或 undefined 的情况。通常我们会使用 || 运算符来实现这个功能,例如:

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

这段代码的意思是,如果 value 为 null 或 undefined,那么就返回 'default'。但是,如果 value 的值为 0、空字符串、false 或者其他 falsy 值,那么也会返回 'default',这可能会导致一些意外的行为。

为了解决这个问题,ECMAScript 2019 引入了空位合并运算符。它只在左侧的值为 null 或 undefined 时才会返回右侧的值,否则返回左侧的值。例如:

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

这段代码的意思是,如果 value 为 null 或 undefined,那么就返回 'default'。如果 value 的值为 0、空字符串、false 或者其他 falsy 值,那么返回的就是 0、空字符串、false 或者其他 falsy 值。

如何使用空位合并运算符?

空位合并运算符的使用非常简单,只需要在表达式中使用双问号(??)符号即可。例如:

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

这个表达式的意思是,如果 value 为 null 或 undefined,那么就返回 'default'。如果 value 的值不为 null 或 undefined,那么就返回 value 的值。

空位合并运算符还可以和其他运算符一起使用,例如:

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

这个表达式的意思是,如果 (null || undefined) 的值为 null 或 undefined,那么就返回 'default'。如果 (null || undefined) 的值不为 null 或 undefined,那么就返回 (null || undefined) 的值。

空位合并运算符的指导意义

空位合并运算符的引入,使得我们在判断变量是否为 null 或 undefined 时更加精确,避免了一些意外的行为。它可以帮助我们更好地处理默认值、函数参数等情况,提高了代码的可读性和健壮性。

示例代码

下面是一些示例代码,演示了空位合并运算符的用法:

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

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

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

总结

本文介绍了 ECMAScript 2019 中新增的空位合并运算符,它可以帮助我们更加精确地判断变量是否为 null 或 undefined,避免了一些意外的行为。空位合并运算符的使用非常简单,只需要在表达式中使用双问号(??)符号即可。希望本文可以帮助读者更好地理解和使用空位合并运算符。

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


猜你喜欢

  • 如何在 Jest + React Native 中模拟设备的网络状态

    React Native 是一个流行的跨平台移动应用程序开发框架,而 Jest 是一个流行的 JavaScript 测试框架。在使用 Jest 进行 React Native 应用程序测试时,模拟设备...

    1 年前
  • RxJS 中如何实现异步操作的恢复和继续?

    在前端开发中,异步操作是不可避免的。而 RxJS 是一种非常流行的响应式编程库,它提供了一种优雅的方式来处理异步操作。本文将介绍 RxJS 中如何实现异步操作的恢复和继续,以及如何应用于实际开发中。

    1 年前
  • 解决 Server-sent Events 中可能遇到的各种奇怪错误

    Server-sent Events(SSE)是一种用于实现服务器向客户端发送实时数据的技术。它是基于 HTTP 协议的,可以在不使用 WebSockets 的情况下实现实时通信。

    1 年前
  • ECMAScript 2019:如何在 JavaScript 中使用异步 I/O

    在 JavaScript 中使用异步 I/O 是一种常见的技术,可以帮助我们在处理大量数据时提高性能。在 ECMAScript 2019 中,JavaScript 引入了一些新的功能,使得使用异步 I...

    1 年前
  • 如何在 Headless CMS 中实现自定义模板?

    前言 Headless CMS 是一种新兴的内容管理系统,它将内容管理和展示分离开来,使得内容可以在不同的平台上展示。在 Headless CMS 中,我们可以使用自定义模板来展示内容,这样可以更好地...

    1 年前
  • Fastify 框架中如何处理 502 错误及网关超时

    前言 在前端开发中,我们经常会遇到网关超时或 502 错误的情况。这些错误会导致我们的应用程序无法正常工作,给用户带来不良的使用体验。为了解决这些问题,我们需要使用一些工具和技术来优化我们的应用程序。

    1 年前
  • Flexbox 实现元素悬停放大缩小的效果

    在前端开发中,悬停效果是很常见的一种交互效果,它可以提升网页的用户体验,让用户更加愉悦地使用网站。而元素悬停放大缩小的效果则更能够吸引用户的注意力,让页面更加生动有趣。

    1 年前
  • TypeScript 2.0 新特性全面解析

    TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集,可以为 JavaScript 提供静态类型、类、接口等面向对象的特性,从而提高代码的可读性、可维护性和可扩...

    1 年前
  • Mocha 测试中 "this.timeout(0)" 有什么意义?

    Mocha 是一款流行的 JavaScript 测试框架,它支持 BDD(行为驱动开发)和 TDD(测试驱动开发)风格的测试,并且可以在浏览器和 Node.js 环境中运行。

    1 年前
  • ES7 的对象方法 Object.keys() 与 Object.values() 的用法

    在 JavaScript 中,对象是一种非常重要的数据类型。ES7 提供了两个非常实用的对象方法:Object.keys() 和 Object.values(),它们可以帮助我们更方便地操作对象。

    1 年前
  • 如何使用 Material Design 定义 App 精美全屏背景?

    Material Design 是 Google 推出的一种设计语言,它的出现给前端开发者带来了很多启示。其中,通过 Material Design 定义 App 精美全屏背景是一个常见的需求。

    1 年前
  • 如何在 Next.js 中使用 Tailwind 预处理器

    如何在 Next.js 中使用 Tailwind 预处理器 Tailwind 是一种基于 CSS 的实用工具库,它提供了一组可重用的 CSS 类,可以让我们快速构建出漂亮的界面。

    1 年前
  • 如何在 ECMAScript 2018 中使用 Object.getOwnPropertyDescriptors 方法实现对象复制?

    在前端开发中,我们经常需要对对象进行复制操作。在 ECMAScript 2018 中,可以使用 Object.getOwnPropertyDescriptors 方法来实现对象复制。

    1 年前
  • Mongoose 中的 populate 不怎么好用?试试 Virtual populate

    前言 在使用 Mongoose 进行数据建模时,我们经常会遇到需要关联查询的场景。Mongoose 中提供了 populate 方法来实现关联查询,但是在实际使用中,我们可能会遇到一些问题。

    1 年前
  • Java 应用程序的监控和优化

    Java 应用程序的监控和优化是每个前端开发人员都应该掌握的技能。当应用程序出现性能问题时,通过监控和优化可以快速识别和解决问题,提高应用程序的性能和稳定性。本文将介绍 Java 应用程序的监控和优化...

    1 年前
  • LESS 中嵌套的子元素如何选择?

    在 LESS 中,我们可以使用嵌套规则来简化样式表的书写。但是,在嵌套规则中,如何选择子元素呢?本文将详细介绍 LESS 中嵌套的子元素选择器,并提供示例代码和指导意义。

    1 年前
  • Custom Elements 中的事件委托技巧与实现方法

    Custom Elements 是 Web Components 标准的一部分,它允许开发者自定义 HTML 元素,通过 JavaScript 来控制其行为,从而实现更加灵活的 Web 应用开发。

    1 年前
  • ESLint 与 Vue.js 一起使用时遇到的问题及解决方法

    在 Vue.js 开发中,使用 ESLint 可以帮助我们避免一些常见的 JavaScript 错误,提高代码质量和可维护性。但是,在将 ESLint 集成到 Vue.js 项目中时,可能会遇到一些问...

    1 年前
  • 使用 React Hooks 实现无限滚动的技巧

    React 是一种流行的前端框架,它提供了许多工具和技术来简化开发过程。其中之一是 React Hooks,它是一种函数式编程的方法,可以使组件更加简洁和易于维护。

    1 年前
  • ES11 新特性之 Promise.allSettled - 并行执行所有异步任务管理

    在前端开发中,我们经常需要执行多个异步任务,并等待所有任务完成后再进行下一步操作。在过去,我们可能需要使用 Promise.all() 方法来实现这一功能。但是,如果其中一个 Promise 出现异常...

    1 年前

相关推荐

    暂无文章