当前位置: 代码网 > it编程>编程语言>Javascript > js有趣的非空判断函数 + ?? 实现

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

2024年10月30日 Javascript 我要评论
分享一个好玩的函数,用于统一判断一个数据是否为“合法数据”,即判断该数据既不是空字符串,也不是 undefined 和 null。1. 非空判断const islegaldat

分享一个好玩的函数,用于统一判断一个数据是否为“合法数据”,即判断该数据既不是空字符串,也不是 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 非空判断 + ?? 内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2026  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com