分享一个好玩的函数,用于统一判断一个数据是否为"合法数据",即判断该数据既不是空字符串,也不是 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 非常有帮助,它与传统的 || 运算符相比,更加精确和安全。