如何正确使用 ECMAScript 2019 中的 Optional Chaining 语法

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

ECMAScript 2019 引入了一项新特性,称为 Optional Chaining。这个特性能够显著简化你在 JavaScript 中的代码编写过程,降低代码维护成本。本文将详细介绍这个特性以及如何正确使用它。

什么是 Optional Chaining

Optional Chaining 是一种 JavaScript 语法糖,它允许我们在访问一个对象的属性或方法时,不必去考虑这个对象是否为 null 或 undefined。如果这个对象不存在,那么 Optional Chaining 表达式的结果将为 undefined,而不是报错。

在以前的 JavaScript 版本中,如果你需要访问一个对象的属性或方法,你必须先判断这个对象是否为 null 或 undefined,否则你的代码会出现意想不到的错误。

例如:

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

这段代码会抛出一个错误,因为 person 是 null,它没有 name 属性。要避免这种情况,我们必须先判断 person 是否为 null 或 undefined,比如:

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

Optional Chaining 可以让我们避开这类冗长的代码,直接访问对象的属性或方法,而不需要担心会出现错误。有了 Optional Chaining,我们可以这样写:

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

如果 person 为 null 或 undefined,那么 name 的值将是 undefined,同时不会抛出任何错误。

在上面的例子中,我们使用了一种新的语法 ?.,它就是 Optional Chaining 表达式的符号。

Optional Chaining 的使用技巧

访问对象属性

Optional Chaining 最常用的场景之一是访问对象属性。在 JavaScript 中,对象的属性一般是通过 . 运算符来访问,例如:

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

在这个例子中,我们可以使用 Optional Chaining 来获取 person 对象的 name 属性:

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

如果 person 为 null 或 undefined,那么 name 的值将是 undefined,否则 name 将是 person 的 name 属性值。

访问对象方法

除了访问对象属性,Optional Chaining 也适用于访问对象方法。在 JavaScript 中,我们可以通过调用对象的方法来执行一些操作,例如:

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

我们可以使用 Optional Chaining 来调用 person 对象的 sayHi 方法:

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

在这个例子中,我们使用了两个 Optional Chaining 语法 ?, 一个用于 person 对象,一个用于 sayHi 方法,如果 person 或 sayHi 不存在,都不会抛出任何错误,并直接返回 undefined。

访问数组元素

Optional Chaining 也支持访问数组元素。在 JavaScript 中,数组元素可以通过下标来访问,例如:

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

我们可以使用 Optional Chaining 访问数组中的元素:

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

在这个例子中,如果 arr 为 null 或 undefined,那么 elem 的值将是 undefined,否则 elem 将是 arr 中的第一个元素。

使用 Optional Chaining 的最佳实践

虽然 Optional Chaining 已经可以显著降低代码维护成本,并且在某些场景下可以帮助我们更好地组织代码,但是在使用 Optional Chaining 时也需要注意某些细节,以避免代码出现意外行为。

  1. 只在必要时的属性或方法上使用 Optional Chaining。Optional Chaining 的目的是帮助我们避免代码出错,它并不是一个万灵药。在一些明确存在的属性或方法上使用 Optional Chaining 可能会让你的代码变得混乱和难以理解。

  2. 在链式调用中使用 Optional Chaining 时需要格外小心。有时候我们会在链式调用中使用 Optional Chaining,例如:

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

    在这个例子中,我们未必需要在 city 属性上使用 Optional Chaining,因为我们已经确保了 user 和 address 属性的存在性。在链式调用中需要格外小心,确保你在正确的位置使用 Optional Chaining。

  3. 避免在空数据结构上使用 Optional Chaining。使用 Optional Chaining 前先确保你的数据结构不是空的,否则你的代码将不能正常执行。例如:

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

    在这个例子中,user 是 null,访问 address 属性就会抛出错误。在使用 Optional Chaining 前,请先确保你的数据结构有效。

示例代码

下面是一些使用 Optional Chaining 的示例代码。

示例1:访问对象属性

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

在本例中,我们可以访问 person 对象的 name 和 email 属性,如果这两个属性中的任何一个不存在,结果将为 undefined。

示例2:访问对象方法

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

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

在本例中,我们使用 Optional Chaining 调用 person 对象的 sayHi 方法,如果 person 为 null 或 undefined,或者 sayHi 不存在,都不会抛出任何错误。

示例3:访问数组元素

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

在本例中,如果 arr 为 null 或 undefined,那么 elem 的值将是 undefined,否则 elem 将是 arr 中的第一个元素。

结论

Optional Chaining 是一项非常有用的语言特性,它可以帮助我们显著降低代码维护成本,并且良好的规范代码组织能够让你的代码更加易于理解和维护。理解 Optional Chaining 的最佳实践,并在实际项目中正确运用,可以让你的代码更加健壮和高效。

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


猜你喜欢

  • 使用 Mocha 和 Sinon 进行桩和模拟测试

    在前端开发过程中,为确保应用程序的正确性和可靠性,需要进行各种测试。其中,桩(Stub)和模拟(Mock)测试是常用的测试方法之一。Mocha 和 Sinon 是两个用于 JavaScript 测试的...

    21 天前
  • 使用 Enzyme 测试 React 高阶组件

    使用 Enzyme 测试 React 高阶组件 React 是一个流行的 JavaScript 库,用于构建用户界面。它已经成为开发人员的优选之一,因为它以可组合性和高可读性而闻名。

    21 天前
  • 解决 GraphQL 中无法执行查询的错误

    GraphQL 是一种用于 API 的查询语言,在前端开发中已经越来越流行。尽管 GraphQL 在编写数据查询请求时非常方便,但有时会出现一些错误,比如无法执行查询。

    21 天前
  • Redux 如何在 React 之外使用

    什么是 Redux? Redux 是一种状态管理库,为 JavaScript 应用程序提供可预测的状态容器。它通常与 React 一起使用,但它并不是为 React 设计的,可以在任何 JavaScr...

    21 天前
  • 报错解决:Node.js setTimeout 与 setInterval 函数被卡顿的解决方法

    在 Node.js 中,setTimeout 和 setInterval 是常用的定时器函数。但是,在某些情况下,它们可能会被卡顿,导致定时器无法正常执行。这篇文章将探讨 Node.js 中 setT...

    21 天前
  • 如何在 Chai.js 中测试一个对象是否相等

    如何在 Chai.js 中测试一个对象是否相等 在前端开发过程中,测试是不可或缺的环节。常常需要对一些数据进行比较,尤其是涉及到对象的比较。Chai.js 是一个常用的测试框架,它提供了方便的 API...

    21 天前
  • 使用 Custom Elements 创建模态框组件

    随着前端技术的不断发展,越来越多的开发者开始使用自定义元素(Custom Elements)来构建复杂的 web 应用程序。在这篇文章中,我们将介绍如何使用 Custom Elements 创建一个模...

    21 天前
  • 使用 Mongoose 进行分页查询的实现方法

    在前端开发中,我们经常需要从数据库中查询大量的数据,并将它们按照一定规则进行展示。当数据量较大时,为了避免一次性加载过多的数据造成页面卡顿,我们通常需要使用分页查询的方式来解决这个问题。

    21 天前
  • 如何通过 PM2 管理用 Node.js 编写的进程

    在前端开发中,我们经常使用 Node.js 来编写服务器端代码。当我们在服务器上运行 Node.js 应用程序时,需要确保它们始终在运行状态以保持业务连续性。为了解决这个问题,我们可以使用进程管理器,...

    21 天前
  • Web Components 实践 | 如何解决组件间通信的问题?

    Web Components 是一种用于创建可重复使用和独立的 UI 组件的技术。它由三个主要的技术组成:Custom Elements、Shadow DOM 和 HTML Templates。

    21 天前
  • 基于 Vue 和 Webpack 的 SPA 架构实现详解及常见 Bug 的解决方法

    单页面应用程序(SPA)已经成为当今 Web 开发领域中的一种热门架构。它具有快速和异步加载资源的优点以及流畅的用户体验。然而,SPA 也有一些常见的问题,如初始化速度、SEO 和浏览器兼容性等。

    21 天前
  • Kubernetes 中的 Ingress 详解

    随着云计算和容器化技术的不断发展,Kubernetes(简称 K8s)逐渐成为了云原生应用开发的主流技术之一。而在 K8s 中,Ingress 是一个十分重要的模块,它的作用是允许外部的 HTTP/H...

    21 天前
  • 详解 ES10 中的模块(Module)规范及使用方式

    Javascript 语言自身不支持模块化(Module)的概念,将多个脚本文件组织成一个模块,提高程序的可维护性和可重用性,是前端程序员一直在探讨的问题。事实上,在 ES6 之前,JavaScrip...

    21 天前
  • Vue.js:使用 v-bind 动态绑定组件属性的方法

    Vue.js 是一款流行的 JavaScript 前端库,它提供了许多有用的功能和工具,方便开发者快速构建现代化的 web 应用程序。Vue.js 的一个强大特性是 v-bind 指令,它允许开发者在...

    21 天前
  • 如何提高 PWA 应用的交互体验

    PWA 应用已经成为了现代 Web 应用程序的一种趋势,PWA 不仅仅是提供了 Web 应用程序的离线访问和更好的性能体验,同时还提供了与本地应用程序相同的用户体验。

    21 天前
  • Fastify 中的全局错误处理方式

    Fastify 是一个快速、低开销且灵活的 web 框架,它使用 Node.js 运行,并且专注于提高 HTTP 服务器性能,以及减少处理请求和响应的时间,并有助于使应用程序构建更好的 API。

    21 天前
  • Deno 中如何处理跨域问题?

    Deno 是一个以安全、稳定、高效为目标设计的现代化 JavaScript 和 TypeScript 运行时环境。在 Deno 中,如何处理跨域问题呢?本文将为您详细介绍。

    21 天前
  • 响应式设计中图片宽度错位问题的解决方法

    随着移动互联网的发展,越来越多的用户使用移动设备访问网站,响应式设计已经成为了现代网站开发的标配。然而,当我们在设计响应式网站的过程中,常常会遇到图片宽度错位的问题。

    21 天前
  • ES8 引入的 Object.getOwnPropertyDescriptors() 方法的错误猜测与实验证明

    背景 ES8 在 2017 年发布了新的标准,其中引入了 Object.getOwnPropertyDescriptors() 方法。该方法能够返回一个对象的所有属性描述符,包括对应属性的值、可枚举性...

    21 天前
  • 如何使用 Node.js 和 Express 创建 RESTful API?

    在今天的互联网应用程序中,RESTful API 已经成为了一种非常流行的架构模式。RESTful API 可以被用来支持不同的客户端设备和应用程序,例如 iOS、Android、Web、桌面应用程序...

    21 天前

相关推荐

    暂无文章