ECMAScript 2020 中的 nullish 合并操作及其实际使用

ECMAScript 2020 是 JavaScript 编程语言的最新标准,它引入了一项新的语法特性:nullish 合并操作符(nullish coalescing operator)。本文将详细介绍 nullish 合并操作符及其实际使用场景,并提供示例代码。

什么是 nullish 合并操作符?

nullish 合并操作符 ?? 是一个新的逻辑运算符,用于判断一个值是否是 null 或 undefined。它和传统的 || 运算符不同, || 运算符会将 falsy 值(比如 false、0、"")转为 false,导致一些错误的结果;而 ?? 运算符只有在值为 null 或 undefined 时才返回右侧的默认值。

以下是一个简单的示例,展示了两个运算符的区别:

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

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

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

在上面的代码中,变量 x 被赋了一个 null 值,因此 z1 的值为 y,即 10;而 z2 的值为 null,因为 ?? 运算符判断了 x 的值为 null。

nullish 合并操作符的实际使用

nullish 合并操作符主要被用于设置默认值,因为它能够防止将 falsy 值当作默认值:

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

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

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

上面的 test 函数中,y 和 z 都被使用了 ?? 运算符设置了默认值,x 没有使用,因此输出结果中 y 为 20,z 为 30。

另一个常见的场景是在访问对象属性时使用 nullish 合并操作符:

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

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

在上面的代码中,对象 userProfile 中的属性值可能为 undefined 或 null,使用 ?? 运算符可以很好地处理这种情况,避免了无意义的操作。

总结

nullish 合并操作符 ?? 是 ECMAScript 2020 中的一项新增语法特性,可以用于判断一个值是否为 null 或 undefined,并设置默认值。与传统的 || 运算符不同,nullish 合并操作符避免了将 falsy 值当做默认值的错误。在使用对象属性时,nullish 合并操作符也能很好地帮助我们处理 undefined 和 null 值。这项新特性的引入将大大减少代码的错误和不必要的麻烦。

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


猜你喜欢

  • React Native 中如何使用 React Navigation 导航库

    React Native 是一种用于构建移动应用程序的框架。虽然 React Native 与 React 在构建界面方面有很多共同点,但在导航方面,两者之间是存在差别的。

    1 年前
  • ES7 引入的三个数组实例方法:快速掌握 Array.prototype.includes/flat/fill 方法

    在 ES7 中,引入了三个新的数组实例方法,分别是 Array.prototype.includes、Array.prototype.flat 和 Array.prototype.fill。

    1 年前
  • RESTful API 中的并发控制实现

    RESTful API 是一种常见的 Web API 设计风格,具有简单、易读、灵活、可扩展等优点。随着 Web 应用越来越复杂,对并发控制的需求也越来越高。在本文中,我们将介绍在 RESTful A...

    1 年前
  • MongoDB 数据库读取大文件优化方法分享

    在前端开发中,经常会需要读取大文件,例如日志、图片以及视频等。当数据量变大时,读取文件就会变得越来越慢,甚至会导致应用程序的崩溃。本文将介绍如何使用 MongoDB 数据库来优化读取大文件并提高应用程...

    1 年前
  • 在 Node.js 中使用 Express 开发 RESTful API

    随着 Web 应用的普及和前后端分离的趋势,RESTful API 已成为了 Web 应用开发的基石之一。而在 Node.js 平台上,开发 RESTful API 所需的框架和工具也是琳琅满目。

    1 年前
  • ECMAScript 2017 中的对象属性命名为字符串模板

    在 ECMAScript 2017 中,我们可以使用字符串模板来命名对象的属性。这个新特性在以前版本的 ECMAScript 中是不可用的。下面我们将具体介绍为什么需要这个新特性,以及如何使用它。

    1 年前
  • 在 Angular 项目中使用 TypeScript 的技巧和经验

    在前端开发中,Angular 和 TypeScript 都是非常流行的技术选型。Angular 是一种现代化的前端框架,适用于构建复杂的单页应用程序;而 TypeScript 则是一种静态类型的 Ja...

    1 年前
  • Webpack 优化策略:如何大幅减小 bundle 的体积

    前端开发中,Webpack 是一个极为重要的工具,能够将多个 JavaScript 模块打包成一个或多个 bundles,方便我们进行代码的管理和部署。但是,在项目变得庞大复杂时,Webpack 打包...

    1 年前
  • 使用 Chai.js 和 Selenium 进行自动化测试

    前言 前端自动化测试是保证代码质量、提高开发效率和用户体验的重要手段。而 Chai.js 和 Selenium 是比较常用的两个工具,其中 Chai.js 是一个 JavaScript 的断言库,Se...

    1 年前
  • Material Design 中 FloatingActionButton 的展示方式

    Material Design 是 Google 在 2014 年推出的一种设计风格,主要应用于 Android 和 Web 应用程序的设计中。在 Material Design 的设计中,Float...

    1 年前
  • # Android 无障碍模式中的滑动界面技巧

    Android 无障碍模式中的滑动界面技巧 在现代社会,随着技术的不断更新和发展,手机已经成为人们日常生活中必不可少的工具。但是对于一些身体比较虚弱的人,直接使用手机可能会存在一些问题。

    1 年前
  • 解析 ES10 中的 Array.flat() 方法及其应用场景

    ES10 中新增了 Array.flat() 方法,它可以将嵌套的数组展平为一维数组。在前端开发中,Array.flat() 有很多应用场景,比如处理多维数组数据、向后台传递扁平化的数据等。

    1 年前
  • 在 K8s 上部署 Koa.js 应用程序:从零开始的完整教程

    本文将介绍如何在 Kubernetes 上部署 Koa.js 应用程序。我们将从头开始,讨论如何创建一个简单的 Koa.js 应用程序,并将其部署到 Kubernetes 集群中。

    1 年前
  • Fastify 框架中的权限管理

    前言 在构建 Web 应用程序时,权限管理是一个重要的模块。在 Fastify 框架中,我们可以使用各种方式来实现权限管理,包括但不限于中间件、装饰器和插件等。在本文中,我们将讨论 Fastify 框...

    1 年前
  • Mongoose 中的 Ref 详解

    在使用 Mongoose 进行 MongoDB 操作时,我们经常需要进行文档之间的关联,以便查询和操作数据。Mongoose 中的 Ref 便是一种实现文档关联的方法。

    1 年前
  • Docker 搭建 Dubbo-Admin

    前言 Dubbo-Admin 是 Dubbo 分布式服务框架的可视化管理平台,提供了各种监控指标、服务调用链等功能,方便管理人员对 Dubbo 服务进行监控和管理。

    1 年前
  • 如何使用 Socket.io 和 JavaScript 在网页上构建实时音乐流

    随着互联网的发展,实时音乐流成为了人们日常娱乐生活的一个重要组成部分。然而,要在网页上构建实时音乐流,需要一些特殊的技术和工具。本文将介绍如何使用 Socket.io 和 JavaScript 在网页...

    1 年前
  • Kubernetes 监控之 Prometheus 与 Alertmanager

    在 Kubernetes 中,了解和监控应用程序、容器和集群是非常重要的。Prometheus 和 Alertmanager 是两个非常强大和流行的开源项目,它们为 Kubernetes 提供了灵活和...

    1 年前
  • Mocha 测试框架中如何避免测试用例中的硬编码

    在进行前端开发时,测试是不可或缺的一部分。Mocha 是一款流行的 JavaScript 测试框架,它提供了一种方便的方式来编写和运行测试代码。然而,在编写测试用例时,很容易陷入硬编码的困境。

    1 年前
  • Vue.js:使用 $set 实现对象响应式属性的添加

    在 Vue.js 中,对象的属性是响应式的。这意味着当对象的属性值发生改变时,视图会自动更新以反映这种变化。但当对象的属性被添加时,这种自动更新的功能就会失效。这篇文章将会介绍 Vue.js 提供的 ...

    1 年前

相关推荐

    暂无文章