空值合并运算符（??）

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

与逻辑或运算符（||）不同，逻辑或运算符会在左侧操作数为假值时返回右侧操作数。比如为假值（例如，’’ 或 0）时会有一些区别

见下面的例子

const foo = null ?? "default string";
console.log(foo);
// Expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0
const bb = false ?? 12;
console.log(bb);
// Expected output: false

空值合并运算符 其只在第一个操作数为 null 或 undefined 时（而不是其他假值）返回第二个操作数：

拓展一下就是 如果?? 左侧的值为 0 或者’’ 或者 false 的时候依然取值为左边的值，并不会进行取右侧值

在一些代码的书写时填充默认值的时候需要注意

const data = {
  name: "",
  age: 12,
  isChild: false,
};

const name = data.name ?? "abc"; // 这里的默认值abc就没有填充正确
// name ="";
const email = data.email ?? "xxx@163.com";
// email = "xxx@163.com";data.email===undefined
const isChild = data.isChild ?? true;
// isChild= false;

短路原则

与 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）
// 所以右侧表达式没有被执行

参考文档

-空值合并运算符（??）

本文作者：番茄炒蛋
本文地址： https://www.noway.pub/2023/09/16/Nullish-coalescing/
版权声明：转载请注明出处！