ECMAScript 2020:使用??nullish coalescing operator

ECMAScript是一种由Ecma国际标准化组织(Ecma International)制定的脚本语言标准,也就是JavaScript的标准。每年都会推出新的版本,ECMAScript2020是在2020年发布的最新规范。其中一个新的操作符——nullish coalescing operator,可以让我们更便捷的处理null或undefined的情况。

nullish coalescing operator是什么?

nullish coalescing operator有一个中文名叫做“??运算符”,它是一种逻辑运算符。这个运算符用于将两个值进行比较,返回第一个定义(非null、非undefined)的值。如果两个值都是null或undefined,返回第二个值。

其实可以理解为,使用nullish coalescing operator时,如果第一个值定义了,使用第一个值;如果第一个值为null或undefined,使用第二个值。

下面是运算符示例:

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

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

上面的代码中,foo为null,代码打印bar,baz为undefined,代码打印qux。

与||的区别

在JavaScript中,还有一个或运算符||,也可以用于处理null或undefined的情况。但是nullish coalescing operator与||有所不同。当||运算符遇到0、''、false等falsy值时,它也会返回第二个值。而nullish coalescing operator只有在值为null或undefined时才返回第二个值。

下面是运算符比较示例:

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

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

上面的代码中,foo为'',但||运算符返回第二个值bar。而baz为0,但nullish coalescing operator不会返回第二个值。

因此,在处理特定情况下,我们可能更倾向于使用nullish coalescing operator。

在实践中使用nullish coalescing operator

在实践中,nullish coalescing operator的一个典型用例是设置默认值。在这种情况下,我们只想在变量为null或undefined时为其提供默认值。

看下面的代码:

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

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

在这里,我们返回默认值bar,因为foo的值为null。这是我们期望的结果吗?似乎不是。所以我们可以使用nullish coalescing operator作为一种更准确定义默认值的替代方式。

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

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

这里,我们返回默认值bar仅在foo为null或undefined时。这是我们想要的结果。

总结

nullish coalescing operator是ECMAScript2020规范中的新的操作符,它可以用来处理null或者undefined的情况。与或运算符||的区别在于,nullish coalescing operator只会在值为null或undefined时返回第二个值。在实践中,nullish coalescing operator可以用作设置默认值的替代方式,以获得更准确的结果。学会使用它,可以提高代码的可读性和可维护性。

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


猜你喜欢

  • 如何优雅地处理 Next.js 中遇到的 404 页面错误?

    对于 Next.js 开发者来说,处理 404 页面错误是一个常见的问题。当用户访问一个不存在的页面时,Next.js 默认会显示一个简单的 404 页面,没有任何提示和反馈。

    9 个月前
  • 利用 ECMAScript 2020 的 import.meta.url 获取模块 URL

    在前端开发中,我们经常需要获取当前正在执行的脚本所在的 URL,以便进行一些动态加载资源的操作,例如使用 Ajax 请求配置文件或者动态加载图片等。在过去,我们一般采用 document.curren...

    9 个月前
  • ECMAScript 2018 中的对象扩展 Rest/Spread 属性的使用技巧

    随着前端技术的不断发展,ECMAScript 的版本也在不断更新。其中,ECMAScript 2018 中引入了 Rest/Spread 属性,为开发者们带来了更多灵活性和效率。

    9 个月前
  • RxJS 中使用 takeUntil 实现取消订阅

    在前端开发过程中,接触到的异步事件非常常见,而 RxJS 作为一种常用的响应式编程库,可以很好地处理异步事件。RxJS 提供了多种操作符用于处理响应式流数据,其中使用 takeUntil 操作符可以轻...

    9 个月前
  • 高性能 Java:构建快速并发应用程序的几种方法

    高性能 Java:构建快速并发应用程序的几种方法 Java 是一种高效的编程语言,尤其在并发编程方面表现出色。然而,为了实现高性能的并发应用程序,需要采用一些特定的技术。

    9 个月前
  • 在 Headless CMS 中集成 Markdown 编辑器的方法

    前言 Headless CMS 是目前比较流行的一种内容管理系统,在最近几年得到了广泛的应用。与传统的 CMS 不同,Headless CMS 只关注内容的管理和存储,不涉及任何展示层面的设计和开发。

    9 个月前
  • 使用 Babel 编译 ES6 代码时如何避免 “missing import 'default'” 的错误

    引言 ES6 是 JavaScript 的一个重大更新,它引入了很多新的语言特性。尽管它带来了一些令人激动的新功能,但它也带来了一些常见的问题。这篇文章将着重讨论在使用 Babel 编译 ES6 代码...

    9 个月前
  • Sequelize 查询 Where 语句参数化绑定的使用方法

    前言 当我们在使用 Sequelize 构建应用程序时,查询数据库是不可避免的。在查询中,Where 语句是非常常见的,而参数化绑定可以防止 SQL 注入攻击,提高应用安全性。

    9 个月前
  • ES6 中的严格模式使用注意事项

    随着 JavaScript 的不断发展,ES6 在语言层面上提供了更多的新特性和语法,其中严格模式是一个非常重要的特性。通过使用严格模式,我们可以让 JavaScript 的行为更加纯净、安全和可预测...

    9 个月前
  • 解决 Koa2 中的跨域问题

    在前端开发过程中,跨域是一个常见的问题。在 Koa2 中,由于其默认的安全性设置,会对跨域进行一些限制,对于开发人员而言,需要针对这些限制采取相应的措施。 跨域的概念 跨域是指从一个域名的页面去请求另...

    9 个月前
  • 详解 Kubernetes High Availability(HA)架构

    Kubernetes是目前最流行的容器编排平台,为了保证稳定性和可用性,Kubernetes引入了HA(高可用性)架构。本文将仔细解释什么是 Kubernetes HA架构,为什么我们需要它,以及如何...

    9 个月前
  • Redux 实战 —— 电商模块

    Redux 是 React 生态圈中重要的一个库,用于管理应用程序的状态。本文将介绍如何在电商模块中使用 Redux,实现状态的统一管理。 安装 Redux 使用 npm 或 yarn 进行安装: -...

    9 个月前
  • 如何在 Angular 项目中使用 Tailwind

    介绍 在 Web 应用程序中,UI 是非常重要的一部分。而对于前端开发人员来说,CSS 是实现好看的 UI 的基础。然而,CSS 的书写方式比较繁琐,因此出现了一些 CSS 框架来帮助开发人员快速实现...

    9 个月前
  • ESLint 报告 'url' is not defined

    前言 前端开发中,我们经常使用一些全局变量,例如 window、document 等。然而在使用 ESLint 时,遇到了这样的问题:url is not defined。

    9 个月前
  • 优秀的 Next.js 实战教程:修复 “Error: No router instance found” 错误

    背景 Next.js 是一个 React 框架,它提供了很多有用的功能,例如自动代码拆分、服务器渲染等。在实际项目中,我们可能会遇到一些问题,比如 “Error: No router instance...

    9 个月前
  • 解决 Sass 编译过程中出现 “Undefined variable…” 错误

    问题描述 在使用 Sass 编写样式时,有可能会出现“Undefined variable…” 的错误,例如: --------------- ----- --------- - ------ -...

    9 个月前
  • ECMAScript 2020:如何使用动态 import 更好地加载模块

    前言 随着前端技术的发展,Web 应用变得越来越复杂和庞大。为了提高应用的性能和开发效率,前端开发者开始使用模块化的开发方式。在 ECMAScript 2015 标准中,JavaScript 引入了模...

    9 个月前
  • 使用 ES9 的转义序列实现 unicode 码点的识别与处理

    Unicode是一种字符编码标准,它为世界上所有的文字字符都分配了唯一的数字标识,这些标识也被称为码点。在前端开发中,我们经常会遇到需要识别和处理特殊字符的需求,本文将介绍如何使用ES9的转义序列来实...

    9 个月前
  • Chai + Mocha 的测试用例组合实践

    测试是一个软件开发流程不可或缺的环节。为了保证代码的质量和可靠性,前端开发人员也需要编写测试用例。Chai 和 Mocha 是两个流行的 JavaScript 测试框架。

    9 个月前
  • 如何在 Mocha 测试中使用 sinon 进行 mock 和 stub

    在前端开发中,我们常常需要对代码进行测试,以确保其功能正常、性能良好以及可扩展性优异。Mocha 是一个流行的 JavaScript 测试框架,而 Sinon 则是一个帮助开发者轻松进行测试的 Jav...

    9 个月前

相关推荐

    暂无文章