ES2020 中的链判断运算符与 Nullish Coalescing 运算符探究

在前端开发中,我们常常需要处理各种数据。有时候我们需要访问一个深层次的对象或数组的某个属性或元素,但是却不确定这个对象或数组是否存在。在 ES2020 中,加入了链判断运算符(Optional Chaining Operator)和 Nullish Coalescing 运算符(空合并运算符),它们为我们简化了许多代码,提高了开发效率。

链判断运算符

在 ES2020 之前,如果我们需要获取一个深层次的对象或数组的某个属性或元素时,我们通常需要进行一系列的判断,如下所示:

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

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

这样的代码很容易出现嵌套,代码量也较大,而且一旦对象结构发生变化,代码也需要跟着修改。

在 ES2020 中,我们可以使用链判断运算符(?.),它可以简化上述代码的写法。链判断运算符可以在对象属性或数组元素为 null 或 undefined 时,立即停止表达式求值,返回 undefined,而不会导致 TypeError 错误。

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

这样的代码看起来简洁很多,而且不需要进行条件判断,代码也更容易维护,但是在使用链判断运算符的时候,需要注意以下几点:

  1. 一定要在对象或数组上使用,而不能在变量或函数调用上使用。

  2. 这个运算符不会捕捉任何明确抛出的异常。

  3. 这个运算符不会访问 undefined 属性或方法的原型链上的任何东西。

  4. 这个运算符的最后一项不能是函数或调用。如果是,请使用常规的函数调用语法。

Nullish Coalescing 运算符

在实际应用中,我们经常需要判断一个值是否为 null 或 undefined,并在其为 null 或 undefined 时设置一个默认值。在 ES2020 中,我们可以使用 Nullish Coalescing 运算符(??)来取代以前的逻辑运算符 ||。

以往我们可以使用以下方式来实现上述功能:

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

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

而现在,我们可以使用 Nullish Coalescing 运算符(??)来简化上述代码:

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

这样的代码看起来更加直观明了,并且不需要进行条件判断。

需要注意以下几点:

  1. ?? 运算符仅在值为 null 或 undefined 时返回默认值,否则返回该值。

  2. ?? 运算符不会将 0、空字符串和 false 视为 null 或 undefined

  3. ?? 运算符不会将任何字符串转换为布尔值 false。即使一个空字符串也不会。

示例

下面是一个综合应用链判断运算符和 Nullish Coalescing 运算符的示例代码:

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

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

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

结论

在 ES2020 中,链判断运算符和 Nullish Coalescing 运算符为我们提供了更加简洁明了的代码编写方式。它们让我们能够更加专注于解决业务问题,而不是被冗长的代码所困扰。但是在使用它们时,我们需要了解并熟悉它们的特性和限制,更好地利用它们来优化代码。

值得一提的是,链判断运算符和 Nullish Coalescing 运算符并不是语言本身的必要部分,许多浏览器可能不支持它们。因此,在实际开发中,需要注意是否需要进行相关兼容性问题的处理。

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


猜你喜欢

  • Vue.js 中使用动画的详细使用方法

    动画是现代前端开发中的不可或缺的一部分,可以为页面增加生动感和交互性,提高用户体验。Vue.js 自带动画库,能够轻松地在 Vue 组件中使用动画。 本篇文章将介绍 Vue.js 中动画的使用方法,包...

    6 天前
  • PM2 常常出问题?如何进行日志快速定位问题

    在前端开发中,我们经常会使用 PM2 来进行进程管理。但是,有时候我们会发现 PM2 常常出问题,而且很难定位问题。本文将会分享一些技巧,教你如何快速定位 PM2 的问题。

    6 天前
  • PWA 应用中缓存机制的具体实现方式

    随着移动设备的使用越来越普及,PWA(Progressive Web App)成为了一个热门的话题。PWA 应用的一个重要特性就是离线缓存,它可以帮助应用在离线状态下保持功能和数据的准确性。

    6 天前
  • 解决 Django REST framework 在单元测试中无法获取 URLs 的问题

    Django REST framework是一个非常流行的Web应用程序开发框架。在开发过程中,我们通常会使用Django REST framework来构建RESTful API。

    6 天前
  • 使用 Jest 进行 React Native 应用的单元测试

    React Native 是一个流行的跨平台移动开发框架,它让开发者能够使用 JavaScript 来开发 iOS 和 Android 应用程序。 单元测试是确定一个组件或函数是否正常工作的重要步骤。

    6 天前
  • ES7 中的 Object.getOwnPropertyDescriptors 方法简化对象操作

    在前端开发中,我们经常需要对 JavaScript 对象进行操作,比如在修改对象属性时需要考虑许多细节。ES7 中的 Object.getOwnPropertyDescriptors 方法提供了一种简...

    6 天前
  • Redux 如何初学者学好

    Redux 是一个前端领域非常流行的数据管理库,它可以让我们更好地管理前端应用的状态,并且使得我们的代码更加易于维护。Redux 可以与各种框架(如 React、Angular 和 Vue)一起使用,...

    6 天前
  • 解决 Angular 应用中使用第三方库遇到的问题

    问题描述 在 Angular 应用中,我们常常需要使用一些开源的第三方库来帮助我们完成一些任务,例如数据可视化、动画效果和网络请求等。但是,在使用这些第三方库时,我们可能会遇到一些问题,比如: 第三...

    6 天前
  • 基于 Enzyme 的 React Native 测试解决方案

    在 React Native 的开发过程中, 测试是不可或缺的一部分。通过测试可以确认组件和应用的行为是否达到预期的目标,并且可以快速发现和修复问题。Enzyme 是一个针对 React 应用的 Ja...

    6 天前
  • Tailwind CSS 实现工欲善其事必先利其器的款式

    随着前端技术的不断发展,捷径和框架是我们工作中的好帮手。在前端开发中,为了让样式更加美观和易于管理,我们通常倾向于使用 CSS 框架简化开发。而 Tailwind CSS 正是一个值得推荐的 CSS ...

    6 天前
  • Mongoose 禁止不在 Schema 中定义的字段的保存

    在 Node.js 的后端环境中,Mongoose 是一个常用的 MongoDB ODM 库。在使用 Mongoose 时,常常会定义一个 Schema 来描述文档的结构,然后在模型中使用这个 Sch...

    6 天前
  • 常见 Headless CMS 错误代码列表及解决方案大全

    Headless CMS 是现代 web 应用开发中的重要技术之一,它可以将内容与样式和功能分离,提高 web 应用的开发效率和灵活性。但是,在使用 Headless CMS 过程中,开发者经常会遇到...

    6 天前
  • 使用 TypeScript 开发 Electron 应用程序的技巧

    随着 Web 技术的不断发展,越来越多的应用程序开始采用 Electron 来开发桌面客户端。而 TypeScript 作为 JavaScript 的超集,提供了更为丰富的类型检查和面向对象的编程能力...

    6 天前
  • 解决 Android Material Design 应用程序的可访问性问题

    随着移动设备的普及,许多应用程序都采用了 Material Design 风格的界面设计。但是,这种风格在可访问性上存在一些问题,例如,无法正确阅读屏幕阻隔和色弱度等。

    6 天前
  • Kubernetes 中如何进行应用的持久化存储

    Kubernetes 是一款开源的容器编排引擎,提供了在云环境中部署、扩展和管理容器化应用程序的机制。在 Kubernetes 中,应用程序的持久化存储是非常重要的一环,因为它们需要在整个应用程序的生...

    6 天前
  • 利用 Serverless 实现微服务数据整合

    前言 随着互联网的发展,单一应用程序已经不能满足业务需求。为了实现不同系统之间的互相调用和数据交换,微服务架构应运而生。相比于单体式应用,微服务架构更加灵活和可伸缩,并且具备更好的拆分和统一管理能力。

    6 天前
  • Docker 容器中如何开启 MongoDB 的认证功能

    随着互联网技术和应用的不断发展,数据存储和管理需求也越来越重要。MongoDB 是一种非关系型数据库,它以 JSON 格式存储数据并提供高性能、高可用性的数据存储和管理服务。

    6 天前
  • RxJS 中操作符 switchMap、exhaustMap 与 concatMap 的区别

    前言 在 RxJS 中,操作符是非常重要的一部分。操作符被用来修改、扩展和转换 Observable 流。在这篇文章中,我们将重点关注三个常用的操作符:switchMap、exhaustMap 和 c...

    6 天前
  • 解决 ES7 中的 Object.entries 方法在 IE 浏览器中不支持的问题

    随着前端技术的不断发展,ES7 中的许多新方法都已经得到了广泛的支持,如 Object.entries 方法。但是,在老旧的 IE 浏览器中,这些方法可能无法正常工作。

    6 天前
  • Promise 中 then 方法内部返回 Promise 的使用技巧

    Promise 中 then 方法内部返回 Promise 的使用技巧 Promise 是 JavaScript 中常用的异步编程解决方案,它的链式调用非常方便,但我们需要注意的是,在 then 方法...

    6 天前

相关推荐

    暂无文章