js有趣的非空判断函数 + ?? 实现

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

1. 非空判断

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

解析一下：data ?? ' '

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

- 如果 data 是 null 或 undefined，则使用空字符串 ' ' 代替，返回 false；

- 如果 data 是 空字符串，返回 false；

- 如果 data 是其他值，则保持 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. 基本介绍

空值合并操作符是 JS 中一个非常实用的逻辑运算符，用于处理 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. ?? 与 || 的区别

在 JS 中，逻辑或运算符 || 也常常用于提供默认值，它不会对 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 非常有帮助，它与传统的 || 运算符相比，更加精确和安全。

到此这篇关于js有趣的非空判断函数 + ?? 实现的文章就介绍到这了,更多相关js 非空判断 + ?? 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！