翼度科技»论坛 编程开发 JavaScript 查看内容

JavaScript基础语法之 || 和 ?? 的踩坑记录

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
在前端开发过程中,我们在设置默认值的时候,会经常用到 || 和 ?? , 但是这两者有什么区别呢?分别在什么场景下面使用呢,会有哪些坑呢,今天我们来梳理下呢。
|| 的语法作用
  1. console.log(null || 1)                //输出 1
  2. console.log(undefined || 1)       //输出1     
  3. console.log(0 || 1)                   //输出1
  4. console.log('' || 1)                   //输出1
  5. console.log(1 || null)               //输出1
  6. console.log(undefined || '')      //输出''
  7. console.log(undefined || 0)      //输出0
  8. console.log(undefined || null)   //输出null
  9. console.log(null || undefined)   //输出undefined
  10. console.log('' || undefined)   //输出undefined
  11. console.log(0 || undefined)   //输出undefined
复制代码
在这里可以看出,使用 || 的时候,当第一个值为非0非null非''非undefined的时候,优先取第一个值,而当第一个值是0或''或null或undefined的时候,则优先取第二个参数的值。
?? 的语法作用
  1. console.log(null ?? 1)                //输出 1
  2. console.log(undefined ?? 1)       //输出1     
  3. console.log(0 ?? 1)                   //输出0
  4. console.log('' ?? 1)                   //输出''
  5. console.log(1 ?? null)               //输出1
  6. console.log(undefined ?? '')      //输出''
  7. console.log(undefined ?? 0)      //输出0
  8. console.log(undefined ?? null)   //输出null
  9. console.log(null ?? undefined)   //输出undefined
  10. console.log('' ?? undefined)   //输出''
  11. console.log(0 ?? undefined)   //输出0
复制代码
在这里可以看出,使用 ?? 的时候,当第一个值为非null非undefined的时候,优先取第一个值,而当第一个值是null或undefined的时候,则优先取第二个参数的值。
|| 和 ?? 的对比总结

对比 || 和 ??后,发现 || 的处理是针对于0或空或null或undefined都去获取后面的默认值,而??则是针对于null或undefined的时候,去获取后面的默认值,则对应的场景如下:

  • 当一个变量值可能为空0或者''的时候,希望最后展示的是默认值的时候,则只能使用 || 来处理
  • 当一个变量值可能为null或undefined的时候,希望最后展示的是默认值的时候,则优先使用 ?? 来处理

来源:https://www.cnblogs.com/LT5505/p/17427301.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具