【前端】‘??‘与‘||‘有什么区别，为什么不问问万能的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

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