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

0 问题

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

---

1 解答

在 JavaScript 中，当使用 ?? 或 || 运算符时，如果左侧的值为 null、undefined、false、0、NaN 或空字符串 ""，则返回右侧的值。

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

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

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 值

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

---

2 其他补充

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

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

false、0、-0、0n （BigInt 类型的零）、""（空字符串）、null、undefined、NaN，都会被识别出来为false

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

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

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

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