JavaScript 中的 elvis 运算符

Sahil Bhosale 2024年2月15日
JavaScript 中的 elvis 运算符

Elvis 运算符是三元运算符的较短版本。这个运算符在 JavaScript 中被称为 nullish 合并运算符,它使用 ?? 表示象征。

仅当表达式值为 nullundefined 时才返回默认值。

在 JavaScript 中实施 nullish 合并运算符 ??

nullish 合并运算符 ?? 在 JavaScript 编程语言的 ECMAScript 2020 版本中引入。

语法:

leftExpr ?? rightExpr

?? 只有当 leftExpr(出现在 ?? 运算符左侧的表达式)是 nullundefined

代码:

let myObj = {name: {firstname: 'Adam', lastname: 'Smith'}};
let val = myObj.name ?? 'Default Value';
console.log(val);

在这里,我们创建了一个名为 myObj 的对象,该对象包含一个名为 name 的属性,该属性包含整个对象作为值。然后我们使用 ?? 运算符。

?? 的左侧运算符,我们有 myObj.name 表达式,而在右边,我们有默认值表达式。只有当 myObj.namenullundefined 时,才会将正确的表达式(即默认值)分配给 val 变量。

myObj.name 表达式包含一些值,它不是 nullundefined。因此,myObj.name 值将存储在 val 变量中,打印 val 变量后,你得到的输出如下。

输出:

elvis 算子输出

nullish 合并运算符 ?? 可以在带有任何数字表达式的单个语句中使用,如下例所示。

代码:

let val = myObj.name ?? myObj.email ?? 'something null or undefined';
console.log(val)

在这个例子中,如果 myobj.namemyObj.email 都是 nullundefined,那么只有 ?? 运算符将返回字符串,或者它将返回第一个表达式中的任何一个的值,该表达式不是 nullundefined

因此,这里只有 myObj.email 表达式是 undefined 而不是 myObj.name,因此,表达式 myObj.name 的值将被返回并存储在 val 变量中。

val 变量现在将包含 name 属性存储的对象,并且该对象将打印在控制台上。

输出:

elvis 算子输出

操作符 ?? 在 IE 和 Opera 浏览器上不被支持。有关浏览器兼容性的更多详细信息,你可以阅读 MDN 文档

之前 ?? 运算符是在 JavaScript 编程语言中引入的,一种常见的方法是使用逻辑 OR 运算符 (||) 来分配变量的默认值。但是这种分配默认值的方法会产生各种问题。

代码:

let val_1 = undefined || 'Hello!';
let val_2 = false || 'Hello!';
let val_3 = '' || 'Hello!';

console.log(val_1, val_2, val_3);

输出:

Hello! Hello! Hello!

||作为布尔逻辑运算符,如果你将 0''NaN 视为如上所示的有效值,此运算符可能会导致意外行为。

通过用 nullish 合并运算符 ?? 替换 OR 运算符来更改相同的示例会产生不同的结果。

代码:

let val_1 = undefined ?? 'Hello!';
let val_2 = false ?? 'Hello!';
let val_3 = '' ?? 'Hello!';

console.log(val_1, val_2, val_3);

输出:

Hello! false

如你所见,此运算符产生正确的输出。这就是为什么 nullish 合并运算符 ?? 是在 JavaScript 中引入的。

作者: Sahil Bhosale
Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

相关文章 - JavaScript Operator