随着前端开发的不断发展，JavaScript 的规模和复杂性也在不断增加。为了满足这种趋势，ECMAScript 也在不断更新，其中最新的版本 ES2021 中引入了双问号运算符（nullish coalescing operator），它是一个非常实用的特性，可以帮助我们更方便地处理变量的默认值问题。本文将详细介绍该特性的用法和实现原理，并提供一些示例代码及指导意义。
一、什么是双问号运算符？
在以前的 JavaScript 版本中，我们可以使用逻辑或运算符 || 来获取变量的默认值。但是，逻辑或运算符对于一些特殊情况的处理不够友好。比如，对于 0、''、false 等 falsy 值，逻辑或运算符会将其视为不存在，从而导致错误的结果。为此，ES2021 新增了一个 nullish coalescing operator，即双问号运算符 ??，它可以像逻辑或运算符一样用于获取变量的默认值，但只有在当前值为 null 或 undefined 时才会返回默认值。
以下是其基本语法：
let result = a ?? b;
上面的代码中，如果 a 不是 null 或 undefined，则将 a 赋值给 result；否则将 b 赋值给 result。下面分别介绍它的一些应用场景。
二、实际应用场景
1. 避免赋错值
在开发中，经常会遇到需要对变量进行类型判断或空值判断的情况。如果使用传统的 || 运算符进行判断，则可能会导致一些难以查找的错误，因为 || 运算符不仅仅会过滤 null 和 undefined，还会过滤空字符串、数字 0、布尔值 false 等 falsy 值。而双问号运算符 ?? 只会检查 null 和 undefined，可以避免赋错值的情况。
let number = 0; let result = number || 42; // 输出 42
上面的代码中，result 最终值为 42，这是因为 0 被视为 falsy 值，被过滤掉了。如果使用双问号运算符 ??，则会直接输出 0：
let number = 0; let result = number ?? 42; // 输出 0
2. 变量默认值的设置
双问号运算符 ?? 还可以用于设置变量的默认值。如果变量值为 null 或 undefined，则可以使用 ?? 运算符指定一个默认值。这样可以避免在变量未定义时出现 TypeError，提高代码的健壮性。
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- ---- -- ----- - - ----- -- -- ----- - - ----- -- -- ----- - - ----- -- -- ----- - - ----- -- -- -------------- -- -- --- -- -- - - - -
上述代码中，?? 运算符分别对变量 x、y、z 进行了判断，如果值为 null 或 undefined，则将默认值设为 1。对于不存在的变量 w，也会使用默认值 1。这样可以避免在使用变量时出现未定义的情况。
3. 函数参数的默认值
双问号运算符 ?? 对于函数参数的默认值也特别有用。在以前的 JavaScript 版本中，我们通常使用 || 运算符来设置函数参数的默认值：
function printNumber(num) {
num = num || 1;
console.log(num);
}
printNumber(0); // 输出 1
printNumber(); // 输出 1上述代码中，num 参数使用了 || 运算符来设置默认值，即如果 num 的值是 falsy 值，则将其设为 1。但是，这种写法可能会在 num = 0 的情况下出现问题。此时，使用双问号运算符 ?? 就可以避免这个问题：
function printNumber(num = 1) {
console.log(num);
}
printNumber(0); // 输出 0
printNumber(); // 输出 1上述代码中，定义了一个带默认参数值的 printNumber 函数，如果没有传递参数，则默认值为 1。这样，就避免了在 num = 0 的情况下出现问题。
4. 对象的属性访问
双问号运算符 ?? 还可以用于对象属性的访问。如果访问对象的某个属性时，该属性不存在或值为 null 或 undefined，则可以使用 ?? 运算符指定该属性的默认值。
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- ---- -- ----------------- -- --- -- -- - ----------------- -- --- -- -- - ----------------- -- --- -- -- - ----------------- -- --- -- -- -
上述代码中，使用了 ?? 运算符对对象 obj 的属性进行访问，如果属性值为 null 或 undefined，则将默认值设为 1。
三、实现原理
双问号运算符 ?? 实际上是一种语法糖，它可以用 || 运算符和 nullish 运算符 ?? 的组合代替。在下面的代码中，我们将使用 || 和 ?? 运算符来模拟双问号运算符的功能：
let result = a ?? b;
等价于以下代码：
let result = (a !== null && a !== undefined) ? a : b;
上述代码中，通过 === 进行比较，如果 a 不是 null 和 undefined，则返回 a；否则返回 b。因此，双问号运算符 ?? 与逻辑运算符 || 的核心区别在于：对于 null 和 undefined 的处理不一样。
四、总结
双问号运算符 ?? 是 ES2021 中的一个实用特性，可以用于获取变量的默认值、变量默认值的设置、函数参数的默认值和对象属性的访问等场景。相比于逻辑或运算符 ||，双问号运算符 ?? 的检查范围更加精确，可以避免一些特定情况下的错误。本文介绍了双问号运算符的基本语法、常见应用场景和实现原理，希望能够为您的 JavaScript 开发提供一些指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c4293968c7c53b0e8de66