ES10 中的可选链操作符和 nullish 合并运算符的联合使用

在 JavaScript 开发中,经常会遇到需要判断对象或属性是否存在的情况,以及需要给变量设置默认值的情况。在 ES10 中,新增了可选链操作符(Optional Chaining Operator)和 nullish 合并运算符(Nullish Coalescing Operator),它们的联合使用可以让我们更方便地处理这些情况。

可选链操作符

可选链操作符 ?. 可以在不确定对象或属性是否存在的情况下,避免出现 undefinednull 的情况。如果对象或属性存在,则返回其值;否则返回 undefined

例如,我们要获取一个对象的嵌套属性 a.b.c 的值,但是不确定 abc 是否存在:

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

如果 abc 不存在,则 value 的值为 undefined

使用可选链操作符可以避免出现 Cannot read property 'xxx' of undefined 的错误,同时也可以简化代码。

nullish 合并运算符

nullish 合并运算符 ?? 可以在变量值为 nullundefined 时,返回默认值。

例如,我们要给一个变量设置默认值,但是不确定该变量是否已经被赋值:

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

如果 someVariable 的值为 nullundefined,则 value 的值为 defaultValue

使用 nullish 合并运算符可以简化代码,并且避免一些潜在的错误。

联合使用

可选链操作符和 nullish 合并运算符可以联合使用,以更方便地处理对象或属性的判断和变量的默认值。

例如,我们要获取一个对象的嵌套属性 a.b.c 的值,如果 abc 不存在,则返回默认值:

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

如果 abc 不存在,则 value 的值为 defaultValue

使用可选链操作符和 nullish 合并运算符的联合使用,可以简化代码,同时也可以避免出现一些潜在的错误。

示例代码

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

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

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

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

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

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

总结

ES10 中的可选链操作符和 nullish 合并运算符可以帮助我们更方便地处理对象或属性的判断和变量的默认值。它们的联合使用可以让我们的代码更简洁,同时也可以避免一些潜在的错误。在实际开发中,我们应该根据具体情况灵活选择使用。

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


猜你喜欢

  • Linux 内核网络性能优化:降低延迟,加快速度

    前言 在网络应用中,网络性能是一个非常重要的指标。为了提高网络性能,我们可以从多个角度入手,比如优化应用层协议、优化系统网络配置、优化内核网络处理等。本文将主要讲解 Linux 内核网络性能优化方面的...

    1 年前
  • 使用 Custom Elements 和 Polyfills 创建自定义行为

    什么是 Custom Elements 和 Polyfills Custom Elements 是一项 Web Component 标准,可以让开发者创建自定义 HTML 元素并定义其行为。

    1 年前
  • Koa 中的性能优化技巧

    Koa 是一个基于 Node.js 的轻量级 Web 框架,它的设计理念是中间件(Middleware)优先,可以帮助开发者快速地构建高效、可靠的 Web 应用程序。

    1 年前
  • RxJS 中的 concat 操作符使用

    在 RxJS 中,concat 是一个非常实用的操作符。它可以将多个 Observable 序列按顺序连接起来,形成一个新的 Observable 序列。本文将详细介绍 RxJS 中的 concat ...

    1 年前
  • ES7 中的 Array.prototype.flat() 方法解决多维数组问题

    在前端开发中,我们经常会遇到多维数组的问题,如何将多维数组扁平化处理是一个常见的问题。在 ES7 中,新增了一个 Array.prototype.flat() 方法,可以方便地解决这个问题。

    1 年前
  • ES12 中的 JSON 对象详解

    在前端开发中,JSON 是一种重要的数据格式,它被广泛应用于数据传输和存储。ES12(ECMAScript 2021)中,JSON 对象得到了一些新的改进和扩展,本文将对这些改进和扩展进行详细介绍。

    1 年前
  • Node.js + MongoDB 构建 Web 应用

    在现代 Web 开发中,Node.js 和 MongoDB 是非常流行的技术栈,它们可以轻松地构建高性能、可扩展和易维护的 Web 应用。本文将介绍如何使用 Node.js 和 MongoDB 构建 ...

    1 年前
  • 在 Vue 项目中如何使用 Tailwind CSS

    Tailwind CSS 是一个高度可定制的 CSS 框架,它可以让我们更快、更轻松地构建 Web 应用程序。在 Vue 项目中使用 Tailwind CSS 可以提高我们的项目开发效率和代码复用性,...

    1 年前
  • TypeScript 中下划线的含义及作用范例

    在 TypeScript 中,我们经常会看到一些变量名、函数名以及类成员名前面带有下划线。这些下划线到底是什么意思,有什么作用呢?本文将会详细解答这些问题,并提供一些范例代码来帮助大家更好地理解。

    1 年前
  • Promise 如何自定义执行器以实现自定义 Promise

    Promise 是 JavaScript 中非常重要的一个概念,它是一种异步编程的解决方案,可以有效地解决回调地狱的问题,使我们的代码更加优雅和易于维护。现在,越来越多的前端开发者开始使用 Promi...

    1 年前
  • 使用 Kubernetes 和 Helm 进行持续部署(附详细教程)

    在现代软件开发中,持续部署已经成为了一个必不可少的环节。Kubernetes 和 Helm 是两个非常流行的工具,可以帮助我们实现持续部署。本文将介绍如何使用 Kubernetes 和 Helm 进行...

    1 年前
  • RESTful API 中如何使用 JWT 进行权限管理

    在 Web 应用开发中,RESTful API 是一种常用的架构风格,它可以使前后端分离,提高系统的可扩展性和灵活性。但是,RESTful API 的安全问题也是一个需要关注的问题。

    1 年前
  • 使用 LESS 编写可复用的 CSS 组件

    CSS 组件是 Web 前端开发中非常重要的一部分,尤其是在大型项目中,使用可复用的 CSS 组件可以大大提高开发效率。而 LESS 是一种动态样式语言,可以将 CSS 的功能扩展,使得开发者可以更加...

    1 年前
  • Web Components 中常见的技术选型分析

    Web Components 是一种用于开发可复用、可组合和可扩展的 web 应用程序的技术。它由四个标准组成:Custom Elements、Shadow DOM、HTML Templates 和 ...

    1 年前
  • 如何在 Mocha 测试中使用 Supertest 进行接口测试

    在前端开发中,接口测试是非常重要的一环。Mocha 是一个非常流行的 JavaScript 测试框架,而 Supertest 是一个基于 Superagent 的库,用于测试 Node.js HTTP...

    1 年前
  • 解决 Chai 对 undefined 值的断言不准确问题

    在前端开发中,测试是不可或缺的一部分。而在测试中,断言库是我们经常使用的工具。其中,Chai 是一个非常受欢迎的断言库,它提供了多种语言风格的断言方式,可以让我们更方便地编写测试用例。

    1 年前
  • Deno 中的 WebSocket 性能优化

    WebSocket 是一种在客户端和服务器之间进行双向通信的协议。Deno 是一个现代化的 JavaScript 和 TypeScript 运行时环境,它提供了一种简单易用的方式来创建 WebSock...

    1 年前
  • Next.js 中如何实现网站访问量的统计?

    在现代网站开发中,网站访问量的统计是非常重要的一项工作。统计网站访问量可以帮助我们了解用户行为、优化网站性能、改进用户体验等。在 Next.js 中,我们可以通过多种方式来实现网站访问量的统计。

    1 年前
  • 使用 Babel 转换 TypeScript 代码

    前言 TypeScript 是 JavaScript 的超集,它提供了更加严格的类型检查和更加完善的面向对象编程支持。但是,由于 TypeScript 还没有被所有浏览器原生支持,因此在实际开发中需要...

    1 年前
  • Node.js 中使用 JWT 进行基于角色的权限管理实现方法

    在 Web 应用程序中,权限管理是非常重要的一个部分。通过对用户的权限进行控制,可以保证系统的安全性和数据的完整性。而基于角色的权限管理是一种比较常见的方式,可以将用户分为不同的角色,并为每个角色分配...

    1 年前

相关推荐

    暂无文章