?? JavaScript 双问号（空值合并运算符)

Posted 2023-03-09 suwu150

?? javascript 双问号（空值合并运算符)

一、简述

在网上浏览 JavaScript 代码时或者学习其他代码时，可能会发现有的表达式用了两个问号（??）如下所示：

let username;
console.log(username ?? "Guest");

这里的双引号称为空值合并运算符，它是 ES2020 的一个新特性，它的作用是当一个表达式是 null 或者 undefined 时为变量设置一个默认值。

二、理解实战

那么以上代码的运行结果就很明显

上述代码，由于定义了username,但并没有给username赋值，那么username的值为undefined，所以就会讲Guest打印出来。

再举个🌰，如下代码会把 firstName 变量值赋值给 username 变量。当 firstName 是 null 时，则把 “Guest” 赋值给 username。

let firstName = null;
let username = firstName ?? "Guest";
console.log(username); // "Guest"

总结来说，就是unll和undefined会被赋值??后面给定的值

let firstName = null, gender = undefined;
let name = firstName ?? "Guest";
let genderValue = gender ?? "female";
console.log(name); // "Guest"
console.log(genderValue); // "female"

那有些好奇心比较强的同学可能会问，对于其他false类型的值，该是如何处理的，答案是取除null或undefined之外的正常赋值，看看我的实际操作吧

let age = 0, address = "", isEating = false;
let ageValue = age ?? 20;
let addressValue = address ?? "上海耀华路";
let isEatingValue = isEating ?? true;
console.log(ageValue); // 0
console.log(addressValue); // ""
console.log(isEatingValue); // false

三、对比比较

不同于 JavaScript 逻辑或（||）,空值合并运算符不会在左侧操作数为假值时返回右侧操作数。其中一个例子是左侧的表达式是空字符串（“”,0,false）。

在经典JavaScript中，"",0,false会被认为是假值，所以对于这种真实有值的情况会造成一些数据的误判，导致逻辑发生问题，从而产生了排查困难的bug 缺陷 🐞 , 也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，‘’ 或 0）时。见下面的例子。

在举个例子🌰，同样的代码，但我们将??替换为||,则会有不同的默认数据

let age = 0, address = "", isEating = false;
let ageValue = age || 20;
let addressValue = address || "上海耀华路";
let isEatingValue = isEating || true;
console.log(ageValue); // 20
console.log(addressValue); // "上海耀华路"
console.log(isEatingValue); // true

四、配合 || 和 && 运算符使用 ??

出于安全考虑，双问号配合 JavaScript 逻辑或（||）和逻辑与（&&）时如果没有用括号引起来是不允许的。
我们使用代码做下真实的尝试。

• 和|| 一起使用

let firstName = "John";
let lastName = "Stone";
let username = firstName || lastName ?? "Guest"; // Unexpected token '??'

console.log(username);

• 或者和&&一起使用

let firstName = "John";
let lastName = "Stone";
let username = firstName && lastName ?? "Guest"; // Error: Unexpected token '??'

console.log(username);

实际操作后，我们会发现语法不运行这么操作。这是因为 JavaScript 无法决定首先执行哪个操作符。你需要使用括号来明确告知表达式的优先级。

let firstName = null;
let lastName = undefined;
let username = (firstName || lastName) ?? "Guest";

console.log(username); // "Guest"

五、结语小段落

• JavaScript 双问号也称为空值合并运算符。这个运算符只会在左侧表达式是 null 或 undefined 时返回右侧的表达式。
• 不同于逻辑或，空值合并运算符会允许把 0 和空字符串或false作为有效的数值。
• 不要忘记在配合逻辑或/与使用时用上括号。