ES11 中的新特性:Nullish Coalescing(空值合并)操作符

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在 ES11 中,新增了一种操作符,叫做 Nullish Coalescing(空值合并)操作符。这个操作符的作用是在变量为 null 或 undefined 时,返回一个默认值。这个操作符的语法是 ??,它可以与其他操作符一起使用,也可以单独使用。

空值合并操作符的语法

空值合并操作符的语法是 ??,它的作用是在变量为 null 或 undefined 时,返回一个默认值。下面是一些例子:

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

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

在上面的例子中,变量 xy 都是 null 或 undefined,所以它们的值会被替换成默认值 'default'。变量 z 不是 null 或 undefined,所以它的值不会被替换。

空值合并操作符与逻辑或操作符的区别

空值合并操作符与逻辑或操作符有些相似,但它们有一些区别。下面是一个例子:

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

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

在上面的例子中,变量 x 是 false,但它的值不是 null 或 undefined,所以逻辑或操作符会返回 false。变量 y 不是 null 或 undefined,所以它的值不会被替换。空值合并操作符会返回变量的实际值,而不是变量本身的布尔值。

空值合并操作符的应用

空值合并操作符的应用场景很多,下面是一些例子:

1. 设置默认值

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

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

在上面的例子中,函数 greet 接受一个参数 name,如果 name 的值为 null 或 undefined,就会使用默认值 'world'

2. 避免错误

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

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

在上面的例子中,对象 obj 的属性 name 的值不是 null 或 undefined,所以它的值不会被替换。属性 age 的值是 undefined,所以它的值会被替换成默认值 'unknown'

3. 简化代码

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

在上面的例子中,变量 x 的值会先尝试调用函数 foo,如果它的值不是 null 或 undefined,就返回 foo() 的值。如果 foo() 的值是 null 或 undefined,就尝试调用函数 bar,如果它的值不是 null 或 undefined,就返回 bar() 的值。如果 bar() 的值是 null 或 undefined,就尝试调用函数 baz,最后返回 baz() 的值。

总结

空值合并操作符是 ES11 中的一个新特性,它可以在变量为 null 或 undefined 时,返回一个默认值。空值合并操作符与逻辑或操作符有些相似,但它们有一些区别。空值合并操作符的应用场景很多,它可以用来设置默认值、避免错误和简化代码。

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


猜你喜欢

  • 如何运用机器翻译技术使多语言网站无障碍

    随着全球化的发展,越来越多的网站需要提供多语言支持,以满足不同地区用户的需求。但是,对于开发者来说,实现多语言网站并不是一件容易的事情。其中一个主要的问题就是语言翻译。

    7 个月前
  • 使用 PM2 管理 Express 生成的进程

    在开发 Web 应用程序时,使用 Node.js 平台和 Express 框架是一种非常流行的选择。当我们的应用程序需要在生产环境中运行时,我们需要对其进行管理和监控,以确保它们能够正常运行。

    7 个月前
  • Node.js 中使用 async/await 优化异步代码的实例

    异步编程是 Node.js 的核心,但是异步代码可读性差、错误处理不方便等问题也是不可避免的。ES2017 中引入了 async/await 语法,可以让异步代码更加简洁、易读、直观。

    7 个月前
  • ES11 中 Object.fromEntries() 的使用方法

    在 ES11 中,新增了一个 Object.fromEntries() 方法,它可以将一个由键值对组成的数组转化为一个对象。这个方法的出现,可以方便我们将数组转化为对象,同时也可以用于将 Map 转化...

    7 个月前
  • 轻松创建自定义元素的方法:自定义页面元素 API

    在前端开发中,我们经常需要使用自定义元素来扩展 HTML 标记。自定义元素可以让我们更方便地组织页面结构,提高代码的可读性和可维护性。本文将介绍自定义页面元素 API,帮助你轻松创建自定义元素。

    7 个月前
  • 如何使用 ES10 Object.freeze 和 Object.seal 来保护你的数据

    在前端开发中,数据的保护是非常重要的。为了确保数据的安全性和可靠性,我们需要使用一些特定的方法来保护我们的数据。ES10引入了Object.freeze和Object.seal方法,可以帮助我们实现数...

    7 个月前
  • 如何有效地使用 React 中的生命周期函数

    React 是一款非常流行的前端框架,它的核心是组件化开发。在 React 中,每个组件都有自己的生命周期函数,这些函数可以让我们在组件的不同阶段执行一些操作。本文将介绍 React 中的生命周期函数...

    7 个月前
  • Mongoose 中 Hooks 的应用实战及常见问题解决方案

    什么是 Mongoose Hooks? Mongoose Hooks 是 Mongoose 中的一种机制,可以让我们在执行某些操作前或者后,执行一些自定义的代码逻辑。

    7 个月前
  • CSS Grid 布局中如何使用 grid-template-columns 和 grid-template-rows 控制网格大小?

    CSS Grid 是一种强大的布局系统,可以让开发者轻松地创建复杂的网格布局。其中,grid-template-columns 和 grid-template-rows 是两个非常关键的属性,用于控制...

    7 个月前
  • JavaScript 中的装饰器模式在 Web Components 中的应用

    Web Components 是一种新的 Web 技术,它允许开发者创建可重用的定制元素,从而提高开发效率和代码可维护性。在 Web Components 中,JavaScript 中的装饰器模式可以...

    7 个月前
  • Next.js 源码分析:如何使用 babel-plugin-import 导入组件

    在前端开发中,我们经常需要引入一些第三方 UI 组件库,比如 Ant Design、Element UI 等。这些组件库通常都包含了大量的组件,如果我们直接引入整个组件库,会造成页面加载速度变慢的问题...

    7 个月前
  • PWA 应用实现流程与技巧

    什么是 PWA PWA 全称 Progressive Web App,是一种基于 Web 技术实现的应用程序。与传统的 Web 应用相比,PWA 具有更加接近原生应用的用户体验,能够在离线状态下运行,...

    7 个月前
  • 如何判断 ESLint 代码是否执行成功?

    ESLint 是一个 JavaScript 代码检查工具,用于检查代码的语法和风格是否符合规范。在前端开发中,ESLint 已经成为了必不可少的工具之一。但是,如何判断 ESLint 代码是否执行成功...

    7 个月前
  • Mocha 测试套件执行顺序不如预期的解决方案

    在前端开发中,测试是非常重要的一环。而 Mocha 是一个流行的 JavaScript 测试框架,它可以让我们轻松地编写和运行测试用例。然而,有时候我们会遇到测试套件执行顺序不如预期的问题,这会导致测...

    7 个月前
  • 如何在 LESS 样式中设置文本颜色

    LESS 是一种 CSS 预处理器,它可以让我们写出更加简洁、易于维护的 CSS 代码。在 LESS 样式中设置文本颜色是非常常见的需求,本文将介绍如何使用 LESS 来设置文本颜色。

    7 个月前
  • Material Design 中使用浮动文本框的技巧

    在 Material Design 中,浮动文本框是一种常见的UI元素,它可以有效地提高用户输入的体验。本文将介绍如何使用浮动文本框,并提供一些技巧和实用的示例代码,帮助前端开发者更好地实现这一功能。

    7 个月前
  • 深入了解 ES2016 中新增的函数库及优化技巧

    ES2016 是 ECMAScript 的第七个版本,也被称为 ECMAScript 2016。这个版本引入了一些新的函数库和优化技巧,让前端开发更加高效和方便。本文将深入介绍这些新增的函数库及优化技...

    7 个月前
  • 教程分享:使用 Socket.io 进行实时推送

    教程分享:使用 Socket.io 进行实时推送 Socket.io 是一个基于 Node.js 的实时应用程序框架,它提供了一种简单的方法来实现实时的双向通信。在前端开发中,我们经常需要实时更新数据...

    7 个月前
  • Fastify 框架如何进行多语言支持?

    随着全球化的发展,越来越多的网站需要支持多语言。对于前端开发人员来说,如何在框架中实现多语言支持是一个重要的问题。Fastify 是一个快速、低开销、易于扩展的 Node.js Web 框架,本文将介...

    7 个月前
  • 使用 Promise 时如何避免出现 Unhandled Rejection 错误

    在前端开发中,Promise 是一种非常常见的异步编程方式。它可以让我们更加优雅地处理异步操作,避免回调地狱的情况发生。但是,在使用 Promise 的过程中,很容易出现 Unhandled Reje...

    7 个月前

相关推荐

    暂无文章