【前端】‘??‘与‘||‘有什么区别,为什么不问问万能的chatgpt呢

RogerQianpeng 2024-07-29 13:03:04 阅读 80

0 问题

经常写<code>const data = res.data.a ?? ''或者const data = res.data.a || 'default',一下子感觉好像没啥差别,那为何不问问万能的chatgpt呢?


1 解答

在 JavaScript 中,当使用 ??|| 运算符时,如果左侧的值为 nullundefinedfalse0NaN 或空字符串 "",则返回右侧的值。

但是,两个运算符的行为有所不同。 ?? 运算符只在左侧的值为 nullundefined 时返回右侧的值,而 || 运算符在左侧的值为上述任何一个时都会返回右侧的值。如果左侧的值不是上述值之一,则返回左侧的值。

下面是一些示例,可以帮助说明它们的行为:

let a = null;

let b = 5;

console.log(a ?? 10); // 输出 10,因为 a 是 null

console.log(a || 10); // 输出 10,因为 a 是 null

console.log(b ?? 10); // 输出 5,因为 b 不是 null 或 undefined

console.log(b || 10); // 输出 5,因为 b 不是 falsy 值

console.log("" ?? "hello"); // 输出 "",因为 "" 不是 null 或 undefined

console.log("" || "hello"); // 输出 "hello",因为 "" 是 falsy 值

请注意,|| 运算符在某些情况下可能返回不同于预期的值,因为它不仅仅在左侧的值为 nullundefined 时返回右侧的值。如果左侧的值是一个 falsy 值(例如 0""),那么 || 运算符也会返回右侧的值。因此,如果你想检查一个变量是否为 nullundefined,最好使用 ?? 运算符。


2 其他补充

收到一个值,value,希望判断它是否存在是否有值,0可以被认为为无值,有时也可以被认为为有值

1、如果你想判断一个字段是否有值,可以使用!!value的方式

false0-00n (BigInt 类型的零)""(空字符串)nullundefinedNaN,都会被识别出来为false

2、而如果你希望0被认为是有值,则可以使用!!value || value === 0的方式

3、如果你希望真值被返回其本身而不是true,可以使用value || false ? value : false,注意,0会被认为为false

4、如果你希望0也被认为为有值并返回其本身,可以使用!!value || value === 0 ? value : false

用一个hasValue函数来简单封装一下即可按需使用



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。