在 ES11 中使用空值联合运算符

在 JavaScript 中,空值(null 或 undefined)常常在变量或属性中出现。空值联合运算符是 ES11 中的新功能,也被称为空合并操作符(nullish coalescing operator)。该操作符可以帮助我们更方便地处理空值的情况。本文将介绍空值联合运算符及其使用方法,并提供一些示例代码。

何为空值联合运算符

空值联合运算符(??)的作用是在变量或属性的值为空值时,使用默认值替代。与传统的逻辑或(||)不同的是,联合运算符仅在左侧的值为 null 或 undefined 时才会返回右侧的默认值。以下是一个简单的示例:

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

在上面的示例中,由于 foo 的值为 null,所以使用默认值 'default' 来代替 foo 的值。这与传统的逻辑或运算符产生了不同的结果:

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

在这个例子中,即使 bar 的值为 false 或空字符串,也会返回默认值 'default'。这是因为逻辑或运算符将非空值视为 true。

如何使用空值联合运算符

空值联合运算符可以用在任何需要默认值的场景,比如函数参数、对象属性或数组元素。

函数参数的默认值

我们可以使用空值联合运算符来为函数的参数定义默认值。例如:

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

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

在上面的示例中,如果 arg2 的值为 undefined 或 null,它将被替换为 arg1 的值。如果 arg1 的值也为null 或 undefined,arg2 将被替换为默认值 'default'。

对象属性的默认值

我们可以使用空值联合运算符来为对象属性设置默认值。例如:

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

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

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

在上面的示例中,如果属性的值为 null 或 undefined,使用默认值替代。

数组元素的默认值

我们可以使用空值联合运算符为数组元素设置默认值。例如:

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

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

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

在上面的示例中,如果元素的值为 null 或 undefined,使用默认值替代。

总结

空值联合运算符是 ES11 中的新功能,它可以简化代码,提高可读性,并且在处理空值的情况下有很大帮助。无论是函数参数、对象属性还是数组元素,都可以使用空值联合运算符来替代传统的逻辑或运算符。我们应该充分利用该功能来提高开发效率。

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


猜你喜欢

  • 利用 Elasticsearch 实现 RESTful API 数据搜索的方法

    随着互联网技术的不断发展,数据已经成为了现代社会的重要组成部分。在网络应用程序开发中,数据搜索是一项必不可少的任务。Elasticsearch 是一款基于 Lucene 的开源搜索引擎,它通过快速搜索...

    1 年前
  • 解决 Headless CMS API 调用超时的问题

    前言 随着前端开发的不断发展,Headless CMS 作为管理内容的解决方案得到了广泛应用。而在使用过程中,不可避免地会遇到 API 调用超时的问题。本文将介绍一些解决 Headless CMS A...

    1 年前
  • 从 React 到 Next.js:服务端渲染的实践

    在现代 Web 应用开发中,前端技术的迅速发展与变化常常让人眼花缭乱,特别是在构建高性能、复杂和交互式的应用时,我们需要更好的工具和框架来提升开发效率和用户体验。近年来,React 已经成为了备受欢迎...

    1 年前
  • Redis 操作黑科技:通过 Lua 脚本实现复杂业务逻辑

    前言 Redis 是一款高性能、可扩展、内存存储的 NoSQL 数据库,常用于缓存系统和数据存储系统。Redis 除了基本的 CRUD 操作外,还支持丰富的数据结构和相关命令,比如字符串、列表、集合、...

    1 年前
  • PWA 开发中遇到的路由问题及解决方案

    PWA(Progressive Web App)在前端开发中已经越来越受到重视。它可以让网站拥有类似移动端应用的体验,提升用户体验和访问速度。在 PWA 开发过程中,路由的处理是一个重要的问题,并且很...

    1 年前
  • Web Components 在 Angular 中的使用方法

    Web Components 是由 W3C 定义的一种标准,涵盖了 Custom Elements、Shadow DOM 和 HTML Template 三部分。Angular 程序开发框架可以与 W...

    1 年前
  • CSS Flexbox 实现水平居中的三种方法

    居中是前端开发中一个非常重要的问题,而水平居中尤其是在响应式网页设计中更显得重要。CSS Flexbox 是一个强大的工具,它可以帮助我们快速和容易的实现水平居中。

    1 年前
  • 如何使用 Node.js 应对高并发场景的问题

    在当今互联网高速发展的时代,高并发场景的需求越来越多。前端开发者也需要面对这些场景带来的挑战并寻找解决方案。 Node.js 是一种非常好的解决方案。在这篇文章中,我们将会探讨如何使用 Node.js...

    1 年前
  • TypeScript 中如何处理跨域请求?

    在前端开发中,跨域请求是很常见的。如果不处理好,可能会导致一些问题,如请求被浏览器拒绝或请求失败。在 TypeScript 中,可以使用一些方法来处理跨域请求。 什么是跨域请求? 跨域请求是指在同一个...

    1 年前
  • Kubernetes 资源管理之 Cluster Autoscaler 详解

    在 Kubernetes 集群中,资源管理一直是非常重要的一环。资源管理涉及节点的调度、负载均衡、资源预测、资源分配等方面。其中,Kubernetes 提供了 Cluster Autoscaler 这...

    1 年前
  • 更高效的 JavaScript 编程:Async Iterators in ECMAScript 2019

    在前端开发中,我们经常会遇到需要处理大量数据或者进行异步操作的情况。在传统的编程方式中,我们可能会使用循环或者回调函数来处理这些数据,但是这种方式往往很繁琐并且难以维护。

    1 年前
  • 如何在 Express.js 中使用 MySQL 来建立 Web 应用程序?

    导言 在建立 Web 应用程序时,我们经常需要将数据存储在关系型数据库中,以便对其进行查询、修改和删除等操作。MySQL 是一种常用的关系型数据库,而 Express.js 是一种常用的 Web 开发...

    1 年前
  • Hapi.js 的插件和扩展点,入门指南

    Hapi.js 是 Node.js 平台的一个轻量级、高度可定制的 Web 应用框架,由 Walmart 技术团队开发和维护。Hapi.js 提供了一组稳健、易于学习的 API,可以帮助开发人员构建可...

    1 年前
  • Node.js下开启Sequelize的自动同步功能

    前言 Sequelize是一个基于Node.js的ORM(Object-Relational Mapping)库,能够通过JavaScript来操作SQL数据库,尤其适用于在Node.js应用中进行开...

    1 年前
  • 使用 Docker Compose 搭建 WordPress 应用实践

    介绍 随着云计算和容器化技术的不断发展,Docker 已成为一个非常流行的容器化解决方案。然而,使用 Docker 构建和运行应用程序仍然需要进行一些复杂的配置。为了解决这个问题,Docker Com...

    1 年前
  • ECMAScript 2015(ES6)中的 map 和 set 数据结构简介

    ECMAScript 2015(ES6)中的 Map 和 Set 数据结构简介 ECMAScript 2015(ES6)是一种JavaScript的一种版本,其中包含了一些新的数据结构,其中就包括了 ...

    1 年前
  • Jest 测试 React 组件传参的几种方式分析

    在 React 中,当我们需要将数据从一个组件传递到另一个组件时,可以使用 Props props 作为传递数据的方式。在前端开发中,测试是非常重要的一环,我们需要确保我们的组件在接收到 Props ...

    1 年前
  • Vue.js 自定义指令开发指南:如何实现双向数据绑定

    Vue.js 是一个目前最火热的前端框架之一。它的许多特性都让我们可以更方便、更快乐地开发 web 应用。在这些特性中,就有我们今天要讨论的自定义指令。 Vue.js 的自定义指令可以让我们通过简单的...

    1 年前
  • Deno 应用中如何处理 HTTP 请求响应

    Deno 是一个现代化的 JavaScript 和 TypeScript 运行时,它的目标是成为一个安全、可靠且有弹性的运行时环境。在使用 Deno 开发应用时,处理 HTTP 请求响应是必不可少的一...

    1 年前
  • ES7 中的 Reflect API 详解及实际应用

    在 ES6 引入了 Proxy 对象之后,ES7 又新增了一种 API,它就是 Reflect API 。它和 Proxy 一样,可以让我们更加优雅和简单地对对象进行操作。

    1 年前

相关推荐

    暂无文章