有趣的非空判断函数 + ?? 介绍

分享一个好玩的函数，用于统一判断一个数据是否为"合法数据"，即判断该数据既不是空字符串，也不是 undefined 和 null。

1. 非空判断

javascript 复制代码

const isLegalData = (data) => {
  if (((data ?? '') !== '')) {
    return true;
  }
  return false;
};

解析一下：data ?? ' '

使用空值合并操作符 ??，它会检查 data 的值：

如果 data 是 null 或 undefined，则使用空字符串 ' ' 代替，返回 false；
如果 data 是空字符串，返回 false；
如果 data 是其他值，则保持 data 的原始值，返回 true。

javascript 复制代码

console.log(isLegalData(undefined)); // false
console.log(isLegalData(null)); // false
console.log(isLegalData('')); // false
console.log(isLegalData('Hello')); // true
console.log(isLegalData(0)); // true
console.log(isLegalData(false)); // true

说到这，那就简单了解一下空值合并操作符 --- ?? 吧。

2. 基本介绍

空值合并操作符是 JS 中一个非常实用的逻辑运算符，用于处理 null 和 undefined 值。它允许我们提供一个默认值，当一个表达式的结果是 null 或 undefined 时，就会返回这个默认值。

javascript 复制代码

const value = someVariable ?? defaultValue;

someVariable：被检查的变量或表达式。
defaultValue：当 someVariable 为 null 或 undefined 时，返回的默认值。

举个 🌰

javascript 复制代码

const username = null;
const displayName = username ?? 'Monica';
console.log(displayName); // 输出: Monica

3. ?? 与 || 的区别

在 JS 中，逻辑或运算符 || 也常常用于提供默认值，它不会对 null 和 undefined 做特殊处理，而是对其他的"假值"（如：0、'' 、false、NaN、null、undefined）进行统一处理，视为 false。

javascript 复制代码

const value1 = 0 || 'default';
console.log(value1); // 输出: default

const value2 = 0 ?? 'default';
console.log(value2); // 输出: 0

- || ：返回第一个"真值"

- ?? ：只对 null 和 undefined 处理

如果我们只想处理 null 和 undefined，而保留其他"假值"，应该使用 ??。

4. 注意事项

4.1 优先级

在使用 ?? 时，必须注意运算符的优先级，特别是在与其他逻辑运算符（如 || 和 &&）混合使用时。

如果期望 || 优先执行：

javascript 复制代码

const result = (someValue || otherValue) ?? defaultValue;

如果期望 ?? 优先执行：

javascript 复制代码

const result = someValue || (otherValue ?? defaultValue);

4.2 使用环境

空值合并操作符是 ECMAScript 2020 (ES11) 中的新特性，因此需要确保在现代浏览器或支持 ES2020 的 JavaScript 环境中使用。

5. 实际 🌰

如果在实际开发中，某些配置项可以是 0 或者空字符串，但当这些配置项是 null 或 undefined 时，则需要提供一个默认值。

javascript 复制代码

const config = {
  maxRetries: 0,
  timeout: undefined,
  cacheSize: null,
};

// 正确使用空值合并操作符
const retries = config.maxRetries ?? 5; // 输出: 0（因为 maxRetries 是有效的值）
const timeout = config.timeout ?? 100; // 输出: 100（因为 timeout 是 undefined）
const cache = config.cacheSize ?? 365; // 输出: 365（因为 cacheSize 是 null）

在这个例子中，如果使用 || ，即使 maxRetries 为 0，也会被替换为 5，不是我们想要的结果，所有这种情况下，?? 会更加合适。

空值合并操作符 ?? 对处理 null 和 undefined 非常有帮助，它与传统的 || 运算符相比，更加精确和安全。