ES12 中的空值合并运算符详解

面试官:小伙子,你的数组去重方式惊艳到我了

在 JavaScript 中,对于未定义、 null 和空字符串等空值所涉及到的处理,一度令开发者头疼不已。为了解决这个问题,ES12 中引入了空值合并运算符,可以方便地处理这些空值。

什么是空值合并运算符?

空值合并运算符(nullish coalescing operator)是 ES12 中新增的一种运算符,用于简化处理空值的场景。其表示为 ??。它的作用是如果该运算符左侧的操作数是 null 或 undefined,则返回右侧操作数,否则返回该运算符左侧操作数。

空值合并运算符的使用

下面我们来看一下它的使用示例:

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

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

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

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

在第一个示例中,由于 x 的左侧是 undefined,所以最终的结果为右侧字符串 'default'。而在第二个示例中,由于 y 的左侧是 null,同样返回右侧的 'default' 。对于布尔值和空字符串,它们不属于空值,因此 zm 都返回自身的值,即 false 和 ''。

空值合并运算符与逻辑或运算的区别

ES6 中的逻辑或运算符(||)也可以实现类似的功能,实际上二者的效果很相似。例如:

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

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

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

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

在本例中,由于 undefinednullfalse 和空字符串都是假值(falsy),所以逻辑或运算符都会返回其右侧的默认值 'default'。然而,在某些情况下二者的表现是不同的。例如:

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

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

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

在这个例子中,变量 a 的值为 0,因为 0 也是假值,所以逻辑或运算符会继续往后检查下一个变量,也就是 b。由于 b 的值是 null,因此逻辑或运算符会返回空字符串。而空值合并运算符则会返回左侧变量 a 的值,即 0。

小结

通过对 ES12 中空值合并运算符的讲解,我们可以得出以下结论:

  • 空值合并运算符的作用是返回左侧操作数,如果该操作数是 null 或 undefined,则返回右侧操作数。
  • 空值合并运算符的使用可以简化处理空值的场景。
  • 在进行多个值判断的情况下,空值合并运算符的表现和逻辑或运算符有所不同。

最后,我们再来说一下空值合并运算符的使用建议。由于小心谨慎永远是最明智的策略,我们在使用空值合并运算符时,一定要注意审查代码逻辑,确保使用正确。

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


猜你喜欢

  • Flexbox 布局中常遇到的问题及解决方案

    Flexbox 是 CSS3 中引入的一种新的布局模式,它简化了开发人员在响应式布局中的工作,允许更好地控制元素的布局、位置和大小。然而,因为其独特的工作原理,开发人员在使用 Flexbox 布局时也...

    8 天前
  • Angular + RxJS 的数据获取、加载与交互优化

    在前端开发中,数据获取、加载和交互是必不可少的环节。Angular 和 RxJS 是两个非常有用的工具,它们可以帮助我们更高效地处理这些问题。 本文将重点介绍 Angular 和 RxJS 在数据获取...

    8 天前
  • Deno 中出现 Error: Cannot find module 的解决方法

    Deno 中出现 Error: Cannot find module 的解决方法 在 Deno 中,开发者可能会遇到 Error: cannot find module 的错误提示,这意味着 Deno...

    8 天前
  • 如何使用 Mocha 测试 GraphQL 应用

    随着 GraphQL 在现代 web 应用中变得越来越普遍,我们希望确保我们的 GraphQL 应用的可靠性和正确性。Mocha 是一个流行的 JavaScript 测试框架,可以帮助我们测试我们的 ...

    8 天前
  • TypeScript 实现 WebWorker 时的技巧

    随着 Web 应用程序变得越来越复杂,前端开发人员开始寻找方法来优化 UI 性能和减少页面响应时间。Web Workers 作为一个用于创建多线程 JavaScript 应用的 API,通过允许代码在...

    8 天前
  • 如何在 PWA 中实现推送通知?

    PWA(Progressive Web Apps)是一种在网页应用程序中增加了本地应用程序的功能的技术。PWA 不仅可以在所有设备上运行,还可以像本地应用程序一样充分利用设备的功能。

    8 天前
  • 使用 React 构建可复用的 UI 组件库

    React 是现在最流行的前端框架之一。它的强大之处在于它可以轻松地创建可复用的 UI 组件。这是一个非常有用的特性,因为您可以创建一个组件库,将其在多个应用程序中使用,并确保它们都具有一致的外观和感...

    8 天前
  • 减少 Serverless Architecture 中的网络延迟

    随着 Serverless 架构的越来越流行,网络延迟也成为了开发人员和用户面临的一个常见问题。在传统的架构中,服务端和客户端通常都在同一台机器上,因此网络延迟很小。

    8 天前
  • Docker 容器网络深度剖析

    随着微服务架构的流行,Docker 的使用越来越广泛。Docker 的容器化技术让应用程序的部署变得更加轻松、灵活和可移植。容器之间的通信也成为了一个需要注意的问题,本文将深度剖析 Docker 容器...

    8 天前
  • Kubernetes 集群内 Pod 资源占用过多,如何优化?

    前言 在 Kubernetes 中,Pod 是最小的可部署单元,通常包含一个或多个容器。由于 Pod 的设计灵活,很容易在集群内部署一组不同的容器,以提供服务。但是,在实际部署过程中,我们经常会遇到资...

    8 天前
  • 为什么 Headless CMS 在企业中受欢迎?

    随着企业对数字内容的需求越来越高,许多公司开始转向 Headless CMS。Headless CMS 允许开发人员使用现代技术栈来开发快速响应的应用程序,同时提供一个关注内容的 CMS 中心。

    8 天前
  • 在使用 Enzyme 进行 React Native 组件测试时如何模拟 AsyncStorage?

    React Native 是一个流行的移动应用程序框架,它允许开发人员使用 JSX 编写用户界面,同时使用 JavaScript 编写底层逻辑。在开发 React Native 应用程序时,我们常常需...

    8 天前
  • 如何在多个页面中重用 Web Components 库

    什么是 Web Components? Web Components 是一种用于编写可重用组件的技术。它们是由自定义元素、影子 DOM 和模板组成的。这些元素旨在通过 HTML 标记使 Web 应用程...

    8 天前
  • 针对 PM2 内存泄漏的定位和解决方案

    什么是 PM2? PM2 是一款用于管理 Node.js 进程的进程管理器。它可以帮助我们轻松地进行进程监控、日志管理等操作,同时还可以在服务挂掉时自动重启。在大型 Node.js 项目中,使用 PM...

    8 天前
  • Web 设计中如何应用无障碍设计的理念

    Web 设计中如何应用无障碍设计的理念 随着互联网的不断发展,越来越多的人开始使用 Web 来获取信息和服务。然而,对于那些面临身体或神经系统障碍的人,访问 Web 可能会成为一项困难的任务。

    8 天前
  • 在 TailwindCSS 中编辑不同元素之间的间距

    TailwindCSS 是一款流行的 CSS 框架,它通过一系列简洁的类来实现快速且灵活的样式设计。其中一个重要的特点是它的间距系统,可以让你很容易地定义不同元素之间的间距。

    8 天前
  • Next.js 项目中集成 Google Analytics 的方法详解

    前言 在制作网站过程中,我们常常需要了解用户的访问情况以及网站的性能。Google Analytics 是一款极为优秀的网站统计工具,它可以通过跟踪用户活动来提供详细的数据分析和报告。

    8 天前
  • PWA 技术在 React Native 中的应用实践

    什么是 PWA PWA (Progressive Web App) 是一项 Web 技术,它采用现代 Web 技术将 Web 应用打造得像移动应用一样具有完美的用户体验。

    8 天前
  • 如何构建安全的 Serverless 架构

    Serverless 架构的兴起已经改变了云计算的模式,使得开发人员可以更加专注于代码编写,而无需担心基础设施管理。但是,Serverless 架构也带来了一些新的安全挑战,因为开发人员需要确保他们的...

    8 天前
  • 使用 Mongoose 让 Express.js 与 MongoDB 更好地合作

    前言 在现代 Web 应用中,前端类技术已成为了不可或缺的一部分。作为一名前端工程师,我们需要掌握多种技术,其中包括 Express.js 和 MongoDB。 Express.js 是 Node.j...

    8 天前

相关推荐

    暂无文章