谈谈 JavaScript 中的空值合并操作符 Nullish coalescing operator

简介: 谈谈 JavaScript 中的空值合并操作符 Nullish coalescing operator
+关注继续查看

空值合并运算符 (??) 是一个逻辑运算符,仅当左侧(第一个参数)为空或未定义时才返回运算符(第二个参数)的右侧。 在所有其他情况下,它返回第一个参数。

image

下列这两行测试代码,分别输出 Hello 和 132

因此,正如您在上面的示例中看到的那样,返回 Hello 是因为 undefined 位于运算符的左侧。 如果 null 代替 undefined,结果将是相同的。 在第二个示例中,如果第一个参数中存在除 null 或 undefined 以外的任何内容,则操作员不会检查第二个参数,而是会立即打印第一个值。


在空值合并操作符被加入 ECMAScript 2020 之前,每当我们想为变量赋予默认值时,我们使用 OR (||) 逻辑运算符。 但是使用 OR 运算符有一些潜在的问题: || 运算符并不区分 false、0、“” 和 null/undefined。 所有这些都被 OR 运算符判定为返回 false,所以如果它遇到任何这些作为第一个参数,那么我们将得到第二个参数作为结果,这使得 OR 运算符的可信度降低。


下图显示了 ?? 和 || 这两个操作符的差异:image

遇到 0,|| 会返回右边的操作数 100,而因为 0 既不是 undefined 也不是 null,因而 0 ?? 100 会返回 0.

关于 ?? 的优先级问题

?? 运算符仅比 MDN 文档中给出的优先级表中的 OR 运算符低一位。 这意味着它将在 = 和三元运算符之前以及 + 和 * 等运算符之后进行评估。

为了提高代码可读性,在使用 ?? 时请添加小括号:

image

SAP Spartacus 的实现中也有大量 ?? 的用法,如下图所示:

image


相关文章
|
14天前
|
JavaScript 前端开发 安全
|
3月前
|
JavaScript
js两个二维数组合并并去除相同项(整理)
js两个二维数组合并并去除相同项(整理)
js两个二维数组合并并去除相同项(整理)
|
3月前
|
JavaScript
js数组合并(整理)
js数组合并(整理)
|
4月前
|
JavaScript
JS数组合并(5种)
JS数组合并(5种)
38 0
|
5月前
|
JavaScript 前端开发
如何在 JavaScript 中合并两个数组而不出现重复的情况
如何在 JavaScript 中合并两个数组而不出现重复的情况
|
5月前
|
JavaScript 前端开发 算法
如何在 JavaScript 中合并两个数组而不出现重复的情况
如何在 JavaScript 中合并两个数组而不出现重复的情况
|
5月前
|
JSON JavaScript 前端开发
javascript对象数据合并实现补齐24小时时间段同时赋值0的解决方案
javascript对象数据合并实现补齐24小时时间段同时赋值0的解决方案
63 0
|
5月前
|
JavaScript
多个js对象数组合并成一个对象数组的解决方案
多个js对象数组合并成一个对象数组的解决方案
93 0
|
7月前
|
存储 JavaScript 前端开发
js 对象合并 与数组合并
在 JavaScript 中,对象和数组都是非常常见的数据结构,它们可以用来存储和操作数据。有时候我们需要将两个对象或数组合并在一起,以便更好地进行操作。本文将会介绍如何在 JavaScript 中合并对象和数组。
|
8月前
|
JavaScript 前端开发
JS【数组合并】的性能差异对比
数组合并可以说是我们在操作数组中最常遇到的场景之一! 本篇将简要分析三种数组合并的方法,并带来它们的性能差异分析~