增强逻辑运算符:ECMAScript 2019 中的 Nullish Coalescing 和 Optional Chaining 运算符

ECMAScript 2019 这个版本引入了两个非常实用的增强逻辑运算符:Nullish Coalescing 和 Optional Chaining 运算符。

这两个运算符可以帮助我们更加优雅地处理代码中的各种异常情况,减少不必要的报错和代码复杂度。

Nullish Coalescing 运算符

Nullish Coalescing 运算符(??)可以让我们更方便地设置默认值,解决了 OR 运算符的一些缺陷。

以前的代码可能长成这样:

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

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

这段代码中,我们使用了 OR 运算符来给 name 设置默认值,但这样会有一些问题。比如说,在 name 参数传入了一个 falsy 值(比如 0、空字符串、null 或 undefined)时,name 会被赋值成默认值,这可能不是我们想要的。

Nullish Coalescing 运算符提供了更加严格的默认值设置方式,只有在变量是 null 或 undefined 时才会使用默认值:

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

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

这样写可以安全地处理各种奇怪的情况,代码变得更加健壮。

Optional Chaining 运算符

Optional Chaining 运算符(?.)可以让我们更方便地访问嵌套对象的属性,解决了 && 运算符的一些限制。

以前的代码可能长成这样:

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

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

这段代码用了好几个 if 判断来保证不会出现报错的情况。但是这种代码非常繁琐,不够简洁。

现在我们可以使用 Optional Chaining 运算符来改写:

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

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

这样代码就变得更加简洁明了了。

总结

ECMAScript 2019 中的 Nullish Coalescing 和 Optional Chaining 运算符为我们带来了很多便利,让我们能够更加优雅地处理代码中的异常情况。

在代码编写中,我们应该更倾向于使用这两个运算符,而不是使用传统的 && 和 || 运算符。

希望这篇文章能够帮助大家更好地理解这两个运算符的用法和意义,帮助大家提升前端开发的能力。

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


猜你喜欢

  • PM2 如何根据 CPU、内存等系统指标自动调节进程数量?

    在大型应用中,自动化进程管理可以让我们在高负载情况下平滑地伸缩应用,同时避免出现失败案例。PM2 是一个非常流行的进程管理器,它提供了自动化进程管理的功能,可以根据 CPU、内存等系统指标动态地自动调...

    1 年前
  • Web Components 调试技巧及常见问题解决方案

    Web Components 是一种基于 Web 平台的组件化开发技术,可以让我们在 Web 应用中创建可重复使用的、独立的、自定义元素。在开发过程中,我们经常会遇到 Web Components 调...

    1 年前
  • 创建可伸缩的 Server-sent Events(SSE)客户端的最佳实践

    在 Web 应用程序中,我们经常需要实时更新数据,例如聊天室、实时报价等。 Server-sent Events(SSE)是一种实时通信技术,它允许服务器向客户端发送事件,以便在服务器端检测到更新时即...

    1 年前
  • ECMAScript 2016:掌握 let/const 的暂时性死区

    在 ES6(或称 ECMAScript 2015)中,引入了 let 和 const 两个新的声明变量的关键字。相比于 var,它们有更明确的作用域和更严格的限制,使得代码更易于维护和理解。

    1 年前
  • 使用 Socket.io 实现 Web 客户端与 Android 客户端通信

    随着移动设备的普及,越来越多的网站需要同时提供 Web 和移动客户端。而这两个客户端之间的通信是非常必要的。本文将介绍如何使用 Socket.io 实现 Web 客户端与 Android 客户端之间的...

    1 年前
  • CSS Grid 实现分割页面功能布局解决方案

    前言 在前端开发过程中,页面布局是非常重要的一环。CSS Grid 是一种强大的布局方式,它可以实现复杂的页面布局,使得页面显示更加美观、合理。本文将详细介绍 CSS Grid 的使用方法,并给出相关...

    1 年前
  • 如何使用 GraphQL 实现分布式 API 架构

    在传统的 RESTful API 架构中,每个接口定义的返回值都是固定的,即便客户端需要获取的数据只有一部分,服务端也会将所有数据返回。而在分布式系统中,由于服务器数量及位置的变化,这种方法可能导致性...

    1 年前
  • Nginx 性能优化:如何利用 cache 提升性能和并发请求

    Nginx 是一个高性能的 Web 服务器和反向代理服务器,经常用于处理大量的并发请求。然而,如果没有正确配置,Nginx 的性能可能会受到影响,导致响应时间缓慢或者并发请求处理效率低下。

    1 年前
  • 解决 AngularJS 应用程序中页面重定向的问题

    背景介绍 AngularJS 是一个非常受欢迎的前端框架,它提供了很多方便的功能和工具,帮助开发人员快速构建交互式的应用程序。在开发 AngularJS 应用程序时,重定向问题是比较常见的一个问题。

    1 年前
  • SASS 中的 @extend 指令详解

    SASS 是一种比 CSS 更加自由和灵活的样式预处理器,它扩展了 CSS 的语法并且允许使用变量、函数和嵌套等等特性来编写样式代码。在 SASS 中,@extend 指令是一个非常实用的功能,它可以...

    1 年前
  • 如何在 Serverless 框架中使用 Step Functions 实现有状态应用

    Serverless 架构是一种无服务器的云计算架构,允许开发人员在没有管理服务器的情况下构建和运行应用程序。它提供了更快的开发速度、更好的可伸缩性和更低的成本。AWS Step Functions ...

    1 年前
  • RxJS 实战:使用 filter 操作符进行搜索

    RxJS 是一种响应式编程库,使用它可以轻松处理异步数据流,以及使用响应式编程范式进行代码的复杂处理。在本文中,将介绍如何使用 RxJS 中的 filter 操作符,帮助前端工程师更加高效地进行数据搜...

    1 年前
  • 如何使用 Jest 进行 React Native 组件的测试

    前言 React Native 是一种强大的移动应用程序框架,它可以让开发人员使用 JavaScript 和 React 编写原生 iOS 和 Android 应用程序。

    1 年前
  • 深入理解 Hapi.js 的生命周期函数和钩子函数

    Hapi.js 是一个非常适用于构建 web 应用程序的 Node.js 框架,它提供了一个生命周期和钩子函数的概念来让开发者更好地控制应用程序的运行过程。本文将详细介绍 Hapi.js 的生命周期函...

    1 年前
  • 如何使用 LESS 编写自适应和移动优化 CSS?

    LESS 是一种 CSS 预处理器,在日常的前端开发中广泛应用。它可以帮助我们在 CSS 中实现更加复杂的功能,比如变量、混合、继承等等,同时也可以让我们在编写 CSS 时拥有更加灵活和简洁的语法。

    1 年前
  • Deno 中如何进行进程管理

    在 Deno 中进行进程管理是一个常见的需求,例如启动一个子进程来执行某个脚本或者应用程序,并在主进程中监听子进程返回的数据或者错误。在本篇文章中,我们将探讨在 Deno 中如何进行进程管理,并提供详...

    1 年前
  • 消除 Custom Elements 与 Angular 组件之间相互影响的问题

    背景 随着前端技术的不断发展,Web 应用程序的复杂性也越来越高。这导致了一种趋势,即将应用程序构建为多个组件和小部件。在 Angular 中,组件是基本构建块之一。

    1 年前
  • Mocha 如何测试 Webpack 打包后的代码

    Mocha 如何测试 Webpack 打包后的代码 前端开发中,难免要使用 Webpack 打包工具来优化代码。但如何测试 Webpack 打包后的代码呢?Mocha 是一个流行的 JavaScrip...

    1 年前
  • Material Design 下 Snackbar 的自定义使用案例

    Snackbar 是 Material Design 视觉语言中的一种组件,是用于提供简短、即时和反馈性的消息通知的一种机制。在前端开发中,Snackbar 组件被广泛应用于网页和移动应用程序中。

    1 年前
  • 使用 Babel 编译 ES6 代码时如何支持 Alias

    引言 在前端开发中,我们经常需要使用 ES6 语法来开发更加高效和易于维护的应用。而 Babel 是目前最为流行的 ES6 编译器,拥有丰富的功能和插件来满足前端开发的需求。

    1 年前

相关推荐

    暂无文章