如何使用 ECMAScript 2020 的 Nullish Coalescing 运算符避免 undefined 报错

ECMAScript 2020 新增了 Nullish Coalescing 运算符,可以方便地处理 undefined 和 null 的情况。在前端开发中,我们经常需要判断一个变量是否为 undefined,然后再进行操作,这样会增加代码的复杂度并且容易出错,而 Nullish Coalescing 运算符则可以帮助我们避免这些问题。

理解 Nullish Coalescing 运算符

Nullish Coalescing 运算符是一种逻辑运算符,用于判断左侧的操作数是否为 null 或者 undefined。如果是,则返回右侧的操作数,否则返回左侧的操作数。

Nullish Coalescing 运算符使用两个问号 "?? "表示,语法如下:

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

其中,a 和 b 都可以是任意的表达式,如果 a 不是 null 或 undefined,则返回 a,否则返回 b。

示例代码

下面给出几个示例来更加详细地了解 Nullish Coalescing 运算符的使用。

1. 检查对象属性是否存在

首先,如果我们想要检查一个对象的属性是否存在,通常会使用如下方式:

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

使用 Nullish Coalescing 运算符可以让代码更简洁:

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

obj.name 为 null 或 undefined 时,name 变量会被赋值为 '无名氏',同理,当 obj.gender 为 null 或 undefined 时,gender 变量会被赋值为 '未知'。

2. 设置默认值

另一个常见的使用场景是设置变量的默认值:

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

在上面的代码中,如果 parseInt(inputValue) 的值为 NaN,则 maxCount 会被赋值为 10。但是,如果 inputValue 的值为 0 或者空字符串 "",则 maxCount 也会被赋值为 10,这并不是我们期望的结果。

使用 Nullish Coalescing 运算符可以更好地设置默认值:

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

如果 parseInt(inputValue) 的值为 NaN、null 或 undefined,则 maxCount 会被赋值为 10。

3. 避免函数参数报错

最后一个示例是避免函数参数报错的情况。有时候我们需要在调用函数时传递一些参数,但是这些参数本身并不一定都会存在,这时候就需要使用 Nullish Coalescing 运算符来避免报错了。

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

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

在上面的代码中,options 实际上是一个可选参数,如果不传入 options 或者 options.name 为 null 或 undefined,那么 getName 函数会使用默认值 "无名氏"。

总结

在 ECMAScript 2020 中,Nullish Coalescing 运算符为我们提供了更加简洁、安全、可读性更高的代码实现方式。在日常的前端开发中,我们可以结合具体的场景使用 Nullish Coalescing 运算符,让代码更加优雅和健壮。

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


猜你喜欢

  • Web Components 如何进行单元测试和集成测试?

    Web Components 是一种开发组件化 Web 应用的技术,尤其适用于大型复杂项目。在开发 Web Components 的过程中,单元测试和集成测试是必不可少的,可以保证组件的质量和稳定性。

    1 年前
  • 结合 Promise 实例剖析 JavaScript 中的水印生成算法

    水印是一种在图像或者文档中加入特定信息的技术,例如添加版权信息或者标记文件是原始或者抄袭的。在前端开发中,我们经常需要对图片或者文档进行水印处理。在这篇文章中,我们将通过结合 Promise 实例来剖...

    1 年前
  • 使用 GraphQL 和 React Native 构建实时应用的完整流程

    前言 GraphQL 和 React Native 是当今前端开发最火热的技术之一。GraphQL 是一种 API 查询语言和运行时,可让客户端准确地描述其数据需求。

    1 年前
  • Docker-entrypoint.sh 与 Docker Compose 版本冲突的解决办法

    介绍 在使用 Docker Compose 编排多个容器时,我们经常需要使用 Docker-entrypoint.sh 脚本来执行一些初始化配置工作。然而,在某些情况下,Docker-entrypoi...

    1 年前
  • Redis 数据持久化机制 AOF 的源码解析

    作为前端开发工程师,Redis 的数据持久化机制 AOF 相信大家并不陌生。AOF(Append Only File)是 Redis 数据持久化的一种方式,与 RDB(Redis Database)方...

    1 年前
  • Kubernetes 集群监控工具详解及实战

    在 Kubernetes 集群中,随着应用不断增多和复杂度的提升,需要对整个集群的运行情况进行监控和管理。这就需要借助一些 Kubernetes 集群监控工具来进行细致的监控。

    1 年前
  • Server-sent Events 如何实现浏览器与服务器之间的双向通信

    随着 Web 技术的不断发展,前端应用的复杂度在不断提高,因此需要与服务器进行更加高效的双向通信。Server-sent Events 是一种比较新的技术,可以实现浏览器与服务器之间的实时通信。

    1 年前
  • 如何在 IntelliJ IDEA 中快速解决 ESLint 错误

    介绍 ESLint 是一个插件化的、可配置的 JavaScript 代码静态分析工具。它能够检查和发现 JavaScript 代码中的问题,比如语法错误,潜在的逻辑错误,代码风格问题等。

    1 年前
  • 基于 Enzyme 实现 React 组件的创建事例

    React 是一个开源的 JavaScript 库,用于构建用户界面。Enzyme 是一个流行的测试工具,用于测试 React UI 组件。在本文中,我们将使用 Enzyme 来创建一个基本的 Rea...

    1 年前
  • Mocha 中的 timeout 方法的用法简介

    Mocha 中的 timeout 方法的用法简介 在前端开发中,Mocha 是一个非常受欢迎的 JavaScript 测试框架。Mocha 提供了许多有用的功能,其中一个特别重要的功能就是 timeo...

    1 年前
  • TypeScript 中的代码风格和规范

    在 TypeScript 中,一个好的代码风格和规范可以让代码更易于阅读、维护和修改。本文将介绍 TypeScript 中常见的代码风格和规范,以及如何写出更加规范的 TypeScript 代码。

    1 年前
  • PM2 管理 Node.js 应用程序的启动方式

    在开发 Web 应用程序的过程中,Node.js 已经成为了不可或缺的一部分。Node.js 以其高效、稳定和可扩展的特性受到了广泛的关注和使用。然而,随着应用程序的不断增长和需求的变化,我们需要一种...

    1 年前
  • Chai(assert):如何测试 Websocket 通信?

    在前端开发中,Websocket 是一种用于实现双向通信的协议,它允许服务器向客户端推送数据,也允许客户端向服务器发送数据。在实际开发中,我们需要对 Websocket 进行测试,以保证其可靠性和稳定...

    1 年前
  • Vue.js 项目中使用 Jest 进行单元测试的最佳实践

    在 Vue.js 项目中使用单元测试是非常重要的,因为它可以保证代码的质量和可维护性,并且可以节省开发时间和成本。其中,Jest 是一个流行的 JavaScript 测试框架,可以帮助我们快速编写和运...

    1 年前
  • 使用 Serverless 构建 API

    Serverless 架构因其无需管理服务器的优点,被越来越多的开发者所青睐。在前端领域,我们可以利用 Serverless 架构构建 API,以方便地访问和操作数据。

    1 年前
  • 解决 Webpack 打包后一直处于 compiling 状态的问题

    问题背景 在前端开发中,使用 Webpack 进行打包是非常常见的。但是有些时候,打包会出现一直处于 compiling 的状态,使得开发者无法继续进行开发工作。这个问题一般出现在打包文件比较大或者依...

    1 年前
  • 如何在 PWA 中处理用户点击返回键的行为?

    随着前端技术的不断发展,PWA(Progressive Web Apps)技术也越来越受到开发者的关注。PWA 可以使我们的 Web 应用更加稳定、快速、安全,同时也能够在不同的设备和应用中进行适配。

    1 年前
  • 如何基于 Hapi.js 和 MongoDB 实现数据备份与恢复

    在现代 Web 应用程序中,数据备份和恢复是至关重要的。在本文中,我们将研究如何使用 JavaScript 技术栈中的两个工具 Hapi.js 和 MongoDB 实现全自动数据备份和恢复的方法。

    1 年前
  • Vue.js 中使用 element-ui 进行后台管理系统开发

    在开发后台管理系统时,我们需要使用一些 UI 组件库以方便快速地构建页面和功能。element-ui 是一个基于 Vue.js 的 UI 组件库,拥有丰富的组件,以及优秀的文档和社区支持。

    1 年前
  • ES7 中的 String.prototype.repeat 方法在字符串处理中的应用

    在前端领域,字符串处理是非常重要的一环,而在 ECMAScript 7 (ES7) 中,新增加的 String.prototype.repeat() 方法为我们带来了更加高效和方便的字符串处理方法。

    1 年前

相关推荐

    暂无文章