ES11 (2020) 中的 nullish 合并运算符:如何有效避免编程中的错误?

什么是 nullish 合并运算符?

在早期的 JavaScript 版本中,我们经常使用逻辑或 ( || ) 运算符来判定变量是否为真。例如:

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

这段代码的意思是当 a 为真时,将 result 赋值为 a ,否则将 result 赋值为 b。但是通过逻辑或运算符进行赋值时,如果变量的值为假,那么这个操作就会出现一些不可预知的错误。

ES11 中新增了 nullish 合并运算符 (??),解决了上述问题。nullish 合并运算符的语法如下:

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

这段代码的意思是当 a 的值为 null 或者 undefined 时,将 result 赋值为 b。如果 a 的值既不为 null 也不为 undefined,那么将返回 a 的值。

nullish 合并运算符的使用场景

nullish 合并运算符的主要使用场景是在判断当前值是否为 null 或者 undefined 的情况下,再进行条件的判断。

例如,在 DOM 操作中,我们需要设置某个元素的属性值,但是如果元素为空,我们就无法进行属性的设置。在这种情况下,我们就可以使用 nullish 合并运算符:

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

这段代码的意思是当 element.value 的值为 null 或者 undefined 时,将 elementValue 赋值为 'default value'。否则,将 elementValue 赋值为 element.value。

nullish 合并运算符的优点

避免类型判断的错误

通过使用 nullish 合并运算符,我们可以快速解决在进行类型判断时出现的错误。例如,下面的代码会在查询某个元素的属性值时出现错误:

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

当 element.value 的值为 0 或者空字符串时,上述代码会出现错误。但是通过使用 nullish 合并运算符,我们可以避免这种错误的出现:

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

可读性更强

nullish 合并运算符的语法更加简洁易懂,可以使代码更加易读。

如何学习 nullish 合并运算符

掌握 nullish 合并运算符的最好方式是通过实践。实践可以帮助我们更好地理解和掌握语法规则。

下面是一个示例代码的演示,可以帮助您更好地理解如何使用 nullish 合并运算符:

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

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

上述代码中,element 的值为 null ,所以 elementValue 的值将被赋值为 'default value'。我们可以通过查看控制台来了解 elementValue 的值。

总结

nullish 合并运算符是 ES11 中的全新功能,可以避免在进行类型判断时出现错误。新特性的最大优点就是可以使代码更加易读、简洁,提高开发效率。要掌握 nullish 合并运算符,建议尽可能多地进行实践,提高对语法规则的掌握。

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


猜你喜欢

  • Jest 测试中如何 Mock 异步请求函数

    Jest 是一个非常流行的 JavaScript 测试框架,它提供了许多实用的功能来帮助开发者撰写高质量的测试用例。在前端开发中,我们经常需要使用异步请求来获取数据并进行相应的操作。

    1 年前
  • Sequelize 中如何使用 Hapi 框架进行 Web 开发

    Sequelize 中如何使用 Hapi 框架进行 Web 开发 随着前端开发的飞速发展,Web 开发的工具也越来越多。其中 Hapi 框架和 Sequelize ORM 是越来越受欢迎的工具。

    1 年前
  • 解决 Express.js 文件上传限制大小的问题

    在使用 Express.js 进行文件上传时,可能会遇到上传的文件大小受到限制的问题。这是因为 Express.js 默认限制了上传文件的大小,如果上传的文件超过了默认的限制,就会返回错误信息。

    1 年前
  • 掌握 JavaScript 异步编程:ES10 async/await 最佳实践

    掌握 JavaScript 异步编程:ES10 async/await 最佳实践 在 JavaScript 中,异步编程是非常常见的变成模式,因为 JavaScript 被设计为单线程执行,所以在长时...

    1 年前
  • 理解 ES6 中的封装和闭包如何优化代码

    理解 ES6 中的封装和闭包如何优化代码 随着JavaScript语言的快速发展,对于前端工程师而言,熟悉ES6成为了必备技能之一。而在ES6中,封装和闭包的概念被重点强调,它们不仅方便代码的管理和维...

    1 年前
  • 如何利用 GraphQL 优化 React Native 应用?

    在过去的几年中,GraphQL 已经成为越来越多前端开发人员使用的工具,也被广泛应用于后端领域。它可以帮助前端应用减少冗余数据请求,提高数据响应速度,同时增加了应用的灵活性。

    1 年前
  • 如何利用 Docker 搭建 Java WEB 开发环境?

    Docker 是一种流行的容器化技术,可以方便快捷地搭建开发环境,避免因环境差异导致的问题。在 Java WEB 开发过程中,利用 Docker 搭建开发环境可以让开发者更专注于核心业务的开发,而不必...

    1 年前
  • Fastify 应用中如何处理 CORS

    跨域资源共享(CORS)是指在客户端通过 JavaScript 向不同域名的服务器请求资源时产生的安全机制。由于浏览器存在同源策略,以往只能通过代理接口的方式支持跨域请求,而 CORS 机制通过添加一...

    1 年前
  • 解决 Socket.io 多次连接的问题

    Socket.io 是一个流行的前端库,它允许客户端和服务器之间进行实时通信。但是有些情况下,客户端可能会发起多个连接到服务器,导致一些问题。本文将介绍如何解决 Socket.io 多次连接的问题。

    1 年前
  • 如何在多页面应用中使用 Web Components?

    Web Components 是一种用于组建化开发 Web 应用的技术,可以将自定义的组件封装为特定的 HTML 标签,以便在不同项目中使用。它可以提高代码复用性和可维护性,同时提高开发效率。

    1 年前
  • ECMAScript 2021 中的 default 引入

    ECMAScript(简称 ES)是 JavaScript 语言的标准规范,每年都会发布新的版本。在 ES2021 中,default 引入了一个新的特性,用于增强 JavaScript 语言的规范性...

    1 年前
  • Babel 如何处理 JSX 代码中的样式

    在现代前端开发中,JSX 已经成为了 React 项目中最常用的语言。而为了保证 React 代码能够向下兼容,我们常常需要使用 Babel 进行代码转换。但是,当在 JSX 中涉及到样式时,Babe...

    1 年前
  • 用 coalescing 操作符和可选链改进 ECMAScript 2020 的数据读取

    在现代的前端开发中,数据的读取和处理是非常重要的一环。在 ECMAScript 2020 中,引入了 coalescing 操作符(??)和可选链(?.)来改进数据读取的语法。

    1 年前
  • Deno 如何处理 JSON 数据

    在前端开发中,处理 JSON 数据是一个很常见的需求。而基于 TypeScript 的新型运行时环境 Deno,也提供了丰富的内置 JSON API,方便我们对 JSON 数据进行处理。

    1 年前
  • 制作自定义的 Loading 效果组件及在 Custom Elements 中使用

    随着前端技术的不断发展,页面加载速度已经成为用户体验的关键点之一。而在页面加载时,通常需要展示一个loading效果来提示用户正在加载。本文将介绍如何制作一个自定义的loading效果组件,并演示如何...

    1 年前
  • 了解 @angular/cli——搭建 Angular 开发环境神器

    本文介绍了 Angular 开发环境的脚手架工具 @angular/cli,包括它的安装、使用以及功能介绍,旨在帮助初学者快速进入 Angular 开发领域并规范化开发流程。

    1 年前
  • Material Design 中 AppBarLayout 和 ToolBar 的使用技巧

    简介 AppBarLayout 和 ToolBar 是 Material Design 中重要的 UI 控件,两者经常一起使用来实现一个 Material Design 风格的顶部导航栏。

    1 年前
  • 如何使用 ES6 中的 WeakMap 及其在实际项目中的应用

    随着 JavaScript 语言的不断发展,ES6 引入了许多新的特性和 API,其中包括了 WeakMap。该 API 不同于前面我们所熟知的 Map,它可以让我们避免一些潜在的内存泄漏问题。

    1 年前
  • Chai AssertionError: expected 的含义及排错技巧

    在前端开发中,我们经常需要对代码进行测试。而 Chai 是一个广泛使用的 JavaScript 测试库,它提供了丰富的断言和行为驱动开发工具,使得测试过程更加简单和准确。

    1 年前
  • 在 ECMAScript 2017 (ES8) 中如何使用 SharedArrayBuffer

    SharedArrayBuffer 是 ECMAScript 2017 (ES8) 中新增的一个特性,它可以让 JavaScript 开发者使用共享内存进行多线程编程。

    1 年前

相关推荐

    暂无文章