ES11 (2020) 新增的 nullish 合并运算符:如何使用及注意事项?

在 JavaScript 语言中,null 和 undefined 被判断为 falsy 值,因此在进行 if 判断或者 || 运算时可能会出现一些意料之外的结果。为了解决这种问题,ES11 新增了 nullish 合并运算符 ??。

nullish 合并运算符的作用

nullish 合并运算符 ?? 的作用是对于值为 null 或者 undefined 的变量或对象属性,返回默认值。这样就避免了在进行判断或运算时,例如:

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

这种情况下,y 的值应该是 null,但是因为 null 被判断为 falsy 值,所以 y 的值被赋为了 0。但是如果使用 nullish 合并运算符:

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

这种情况下,y 的值为 null,也就是我们预期的值。

nullish 合并运算符的使用

使用 nullish 合并运算符时,可以指定默认值,例如:

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

如果变量 x 的值为 undefined,则 y 的值会被赋为 0。

对于对象属性的判断,可以使用以下方式:

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

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

在使用 nullish 合并运算符时,需要注意以下几点:

  1. 双问号 ?? 后面只能跟一个值,否则会抛出错误;
  2. 如果变量存在,但是值为 falsy,则默认值也不会生效;
  3. 对象属性访问时,需要使用 ?. 确保对象属性存在。

总结

ES11 新增的 nullish 合并运算符可以解决因为 null 和 undefined 被判断为 falsy 值而导致的问题。使用 nullish 合并运算符时,需要特别注意不要同时使用 || 运算符,以及要特别注意对象属性访问的方式。在实际开发中,可以使用 nullish 合并运算符来提高代码的可读性和稳定性。

参考代码:

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

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

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

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


猜你喜欢

  • Webpack 构建优化实战:使用 DllPlugin 加速构建

    什么是 DllPlugin? Webpack 是一个功能强大的模块化打包工具,在前端开发中得到了广泛的应用。然而,Webpack 在运行时需要将模块打包成一个或多个 JavaScript 文件,而这个...

    1 年前
  • RxJS 实现响应式动画效果的方法

    在前端开发中,实现动画效果是非常常见的需求。传统的实现方式往往需要手动编写一些复杂的逻辑和样式代码,而且难以维护。RxJS 是一种函数式编程库,可以帮助我们更轻松地实现响应式动画效果。

    1 年前
  • PM2 中文文档详解 - 常用命令、各项参数及用例

    什么是 PM2 PM2 是一个 Node.js 应用程序的生产运维工具,可以用来管理 Node.js 进程的启动、重启、停止、监控等操作,还可以实现多进程管理、负载均衡、日志管理等功能。

    1 年前
  • 基于 Serverless 架构的前端部署优化方案

    前言 近年来,Serverless 架构已成为云计算领域的热门话题,其具有高效、灵活、安全等诸多优势。而前端开发也随着技术的不断发展,越来越需要集成各种云计算服务来提高开发效率和用户体验。

    1 年前
  • LRU Cache 实现 SPA 应用的网络缓存优化

    单页应用(Single-Page Application,SPA)经常需要从网络上获取数据来渲染页面,这可能会导致一些性能问题,如长等待时间和网络延迟等。为了避免这些问题,可以使用 LRU Cache...

    1 年前
  • 使用 Jest 测试 React 应用的常见问题及解决方法

    使用 Jest 测试 React 应用的常见问题及解决方法 React 是一个非常流行的前端框架,它提供了一种将界面拆分成独立组件的模式,很容易实现复杂的应用程序。

    1 年前
  • ES10 中引入 Optional Catch Binding 特性,更优雅捕获异常

    在前端开发中,异常处理是不可或缺的一部分,尤其是在异步编程中更是常常出现异常。而针对这些异常,ES10 中引入了 Optional Catch Binding 特性,让捕获异常更加优雅和方便。

    1 年前
  • 在 Sinon.js 和 Chai.js 的帮助下,以 TDD 的方式测试 Web 应用程序

    在编写 Web 应用程序时,我们需要确保代码的质量和稳定性。测试驱动开发 (TDD) 是一种广泛应用的方法,它可以帮助我们在编写代码之前就能发现潜在的问题,并且写出高质量的代码。

    1 年前
  • 如何在 ECMAScript 2017 中使用模块化编程优化代码结构

    什么是模块化编程? 模块化编程是一种将代码划分为独立、可重用的模块的编程方式。在早期的 JavaScript 开发中,没有模块化支持,所有的代码都写在同一个文件中,导致代码结构非常混乱,难以维护和升级...

    1 年前
  • Kubernetes 监控指标的详细解读

    在 Kubernetes 集群管理中,监控指标是非常重要的一环。通过监控指标,我们可以及时发现集群中出现的问题,并对其进行追踪和解决。在本文中,我们将深入探讨 Kubernetes 监控指标的相关概念...

    1 年前
  • Material Design 中实现文字输入框的控件

    在前端开发中,文本框是一个经常使用的UI控件。Material Design是一种广泛网络应用的设计语言,提供了一系列基于视觉层次的设计原则来创造美观而功能强大的用户界面。

    1 年前
  • CSS Reset 和 Normalize.css 的比较及适用场景分析

    CSS Reset 和 Normalize.css 是两种常用的前端样式重置工具,它们的主要作用是在不同浏览器上统一网页样式表现。本文将对两者进行详细比较,并分析它们的适用场景。

    1 年前
  • Hapi 框架的文件压缩插件 —— hapi-unzipper 使用说明

    如果你正在使用 Hapi 框架来构建你的 Web 应用程序,并需要处理上传的压缩文件,那么 hapi-unzipper 可以帮助你快速解压文件并将文件内容提供给你的应用程序。

    1 年前
  • 2019 年 Server-Sent Events

    随着技术的不断发展,前端开发也逐渐变得越来越复杂。为了提升用户体验,前端需要通过持续更新数据来实现即时性以及与后端进行高效的通信。在此过程中,Server-Sent Events(SSE)成为了前端通...

    1 年前
  • Socket.io的使用和优化实例分享

    Socket.io是一个基于WebSocket协议的库,可以实现双向通信。在前端开发中,使用Socket.io可以实现实时更新数据,并且可以提高应用程序的响应速度。

    1 年前
  • Cypress 自动化测试中遇到的多种表单填写方式

    Cypress 是一款现代化的前端自动化测试框架,可用于测试 Web 应用程序的实际功能和性能。在进行自动化测试时,表单填写是一个很重要的步骤,很多测试场景都需要完成表单填写。

    1 年前
  • 如何使用 JavaScript Promise 处理多个 AJAX 请求,并根据先后顺序展现?

    当我们需要在前端应用中处理多个网络请求时,JavaScript Promise 是一种非常有用的工具。它使我们可以轻松地处理异步操作,以及更好地掌控请求的执行顺序。

    1 年前
  • Node.js 实践经验分享:使用 koa2 构建 Web 应用程序

    前言 Node.js 是一个广泛使用的平台,可用于构建 Web 应用程序、命令行工具和服务器。它有着高效的 I/O 模型和事件驱动的非阻塞 I/O,可轻松处理大量并发连接。

    1 年前
  • ES12 中的字符串平滑化 ——String.prototype.replaceAll()

    ES12 中的字符串平滑化——String.prototype.replaceAll() 随着 JavaScript 语言的不断发展,字符串操作在日常开发中变得越来越常见。

    1 年前
  • Java 堆内存性能优化详解

    前言 Java 是一门面向对象的编程语言,它在优秀的跨平台性能和动态内存管理方面享有盛誉。但是,在实际使用过程中,我们经常会面临性能问题,尤其是堆内存方面的问题。 Java 堆内存的性能问题,主要体现...

    1 年前

相关推荐

    暂无文章