Login
芋圆社区 > 编程 > JavaScript > || 运算符的坑

|| 运算符的坑

159
0
2022-09-13
2022-09-13
Hey、小怪兽

  • • 我同事非常喜欢用 || 这个运算符,我一开始看代码也没发现这样写有问题(代码已修改):
  • // 模拟后端的数据
    const data = {
        id: 1,
        sort: 5,
    }
    
    const logData = {
        a: data.sort || data.id,
    }
    
    console.log(logData)
  • • 后端会返回给前端一个data对象,里面有排序sort和id,要做的事情就是给a赋值后端传的sort值,由于一些其他数据库的数据没有sort值所以当data没有sort的时候,就赋值id(id是肯定有的)
  • • 日子本来很祥和的,直到有一天有个BUG提到了我这里,说是明明接口返回了sort值却还是赋值id,原因就出在了 || 运算符上:
  • const data = {
        id: 1,
        sort: 0,
    }
    
    const logData = {
        a: data.sort || data.id,
    }
    
    console.log(logData)
  • • 当sort为0的时候,logData的a并不会是0,而是1,因为在JS默认将0当做false了,这是JS很基础的知识:
  • // 相当于data.id前面只要有这些值,都会当成false
    a: false || null || undefined || '' || 0 || NaN || data.id
    
    // 但是data.id前面有这些值会被当成true
    a: [] || {} || 'false' || data.id
  • • 这样理解的话上面的例子就不能用 || 了,而是用另外一个运算符 ?? :
  • const data = {
        id: 1,
        sort: 0,
    }
    
    const logData = {
        // ?? 运算符,当左边为null或者undefined的时候才会返回右边
        a: data.sort ?? data.id,
    
        // || 运算符会先转化为布尔值判断
        // 左边为false,null,undefined,'',0,NaN等就会返回右边
        b: data.sort || data.id,
    }
    
    console.log(logData)

上一篇:JSON解析与序列化

下一篇:对象转为字符串

Comment

Message Board

编程导航

Array 基础方法

Array 进阶方法 - ES6

一些常用的方法【持续更新】

AES加密 CBC模式

滚动条滚动到底部的判断

console.log展开值不一样

JSON解析与序列化

|| 运算符的坑

对象转为字符串

call,apply,bind

获取数组中对象的某一属性值

jQuery合并ajax请求

批量命名全局变量

forEach方法

round,ceil,floor

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点