空值合并运算符真实使用场景及避坑

在 JS 里，我们要判断一个数值非空，常常需要运用下面的两个不等表达式进行判断，所以我一值有个疑惑，为什么不出一个同时判断不为 undefined 和 null 的方法

if (variable !== undefined && variable !== null) {
  // to do something
}

所以官方在 ES2020 版本里就出了一个叫“空值合并运算符”的东西，官方的解释是：

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

它的一个实际业务应用场景是我们在判断输入框中的值为有效值时，进行一些其它的操作，以前我们通常需要这样做：

if(value !== null && value !== undefined && value !== ''){
    // to do something
}

而有了空值合并运算符，只需要：

if(value ?? '' !==  ''){
  // to do something
}

还有个应用场景是当我们给某个变量赋默认值的时候，以前通常的做法是使用逻辑或操作符（||）：

let link;

// 由于link做了变量声明，但并未赋值，所以为 undefined
let location = link || 'http://i-fanr.com';

然而，由于 || 是一个布尔逻辑运算符，左侧的操作数会被强制转换成布尔值用于求值。任何假值（0， ''，NaN， null，undefined）都不会被返回。这导致如果你使用 0，'' 或 NaN 作为有效值，就会出现不可预料的后果。

let link = '';

// 由于link做了变量声明，但并未赋值，所以为 undefined
let location = link || 'http://i-fanr.com';
console.log(location) // 返回的是 ‘http://i-fanr.com’，而不是''

空值合并操作符可以避免这种陷阱，其只在第一个操作数为null 或 undefined 时（而不是其它假值）返回第二个操作数。

let link = '';

// 由于link做了变量声明，但并未赋值，所以为 undefined
let location = link ?? 'http://i-fanr.com';
console.log(location) // 返回的是 ''