【JS】JS的空值合并运算符（??）

前言

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为null或undefined时，会返回右侧操作数，否则返回左侧操作数。

与逻辑或运算符（||）的区别

逻辑或运算符（||）是一个布尔逻辑运算符，即当左侧操作数会被强制转为布尔值，所有假值（“”,0,NaN,null,undefined）都会隐式转换为false时，此时会返回右侧操作数。可是当 0，""和NaN 需要当做有效值时，逻辑或运算符（||）会导致以下错误：

let count = 0;
let text = "";

let res = count || 42;
let message = text || "hi!";
console.log(res); // 42，而不是 0
console.log(message); // "hi!"，而不是 ""

相比逻辑或运算符（||），空值合并运算符（??），如果左侧操作数为0，“”，NaN，也会被返回。

let count = 0;
let text = "";

let res = count ?? 42;
let message = text ?? "hi!";
console.log(res); // 0
console.log(message); // ""

总结

当你需要 0，""和NaN 作为有效值时，使用空值合并运算符（??），否则使用逻辑或运算符（||）。

与 OR（||） 和 AND（&&） 运算符

与 OR 和 AND 逻辑运算符相似，当左表达式不为 null 或 undefined 时，短路，不会对右表达式进行求值。

function A() {
  console.log("函数 A 被调用了");
  return undefined;
}
function B() {
  console.log("函数 B 被调用了");
  return false;
}
function C() {
  console.log("函数 C 被调用了");
  return "foo";
}

console.log(A() ?? C());
// 依次打印 "函数 A 被调用了"、"函数 C 被调用了"、"foo"
// A() 返回了 undefined，所以运算符两边的表达式都被执行了

console.log(B() ?? C());
// 依次打印 "函数 B 被调用了"、"false"
// B() 返回了 false（既不是 null 也不是 undefined）
// 所以右侧表达式没有被执行

不能与 OR 和 AND 运算符共用

?? 不能与 AND（&&）和 OR（||）运算符组合使用。会抛出语法错误（因为空值合并运算符和其他逻辑运算符之间的运算优先级/运算顺序是未定义的）。

错误写法：

null || undefined ?? "666"; // 抛出 SyntaxError
true || undefined ?? "666"; // 抛出 SyntaxError

但是，如果配合括号来显示表明运算优先级，是可行的。

(null || undefined) ?? "666"; // 返回 "666"

实例

const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

使用场景

antd组件库

select组件的placeholder属性，只有当值为null或undefined时才会展示,如果 0，""和NaN 为有效值，空值合并运算符（??）就适用于判断value。

如上只是一个简单举例，空值合并运算符（??）适用于一切 0，""和NaN 为有效值的场景。