|| 运算符的坑

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

159

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