JavaScript 非空判断函数与空值合并操作符 ?? 详解

分享一个实用的函数，用于统一判断数据是否属于“合法数据”，即该数据既非空字符串，也非 undefined 或 null。

1. 非空判断实现

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

核心逻辑解析：data ?? ' '

利用空值合并操作符 ?? 检查 data 的值：

- 若 data 为 null 或 undefined，则替换为空字符串 ' '，最终返回 false；

- 若 data 本身为空字符串，直接返回 false；

- 若 data 为其他有效值，保持原值不变，返回 true。

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. 基本介绍

空值合并操作符是 JavaScript 中处理 null 和 undefined 值的实用逻辑运算符。当表达式结果为 null 或 undefined 时，它允许返回指定的默认值。

const value = someVariable ?? defaultValue;

- someVariable：需要检查的变量或表达式。

- defaultValue：当 someVariable 为 null 或 undefined 时返回的默认值。

示例说明

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

3. ?? 与 || 的区别

在 JavaScript 中，逻辑或运算符 || 也常用于提供默认值，但它不对 null 和 undefined 做特殊处理，而是将所有“假值”（如 0、''、false、NaN、null、undefined）统一视为 false。

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

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

- ||：返回第一个“真值”；

- ??：仅对 null 和 undefined 进行处理；

若需保留其他“假值”而仅处理 null 和 undefined，应使用 ??。

4. 注意事项

4.1 优先级

使用 ?? 时需注意运算符优先级，特别是在与 || 和 && 等逻辑运算符混合使用时。

若期望 || 优先执行：

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

若期望 ?? 优先执行：

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

4.2 使用环境

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

5. 示例

实际开发中，某些配置项可能为 0 或空字符串，但当这些配置项为 null 或 undefined 时，需提供默认值。

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 非常有效，相比传统的 || 运算符，它更加精确和安全。

本文介绍了基于 JavaScript 非空判断函数与 ?? 的实现方法，更多相关内容可搜索本站以往文章或继续浏览后续文章，感谢支持！