一个由运算符优先级引发的js代码惨案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32768743/article/details/84029539

js在项目中常常会判空的问题，然后给一个默认值，如

a = a || xxxx

一如既往的写下了如下代码

config.span = config.span || config.type === 'line' ? 12 : 24

心里想着如果config.span有值，那么就用原值，要是没有，如果是line类型，就是赋值12，否则赋值24。
内心是这么看的

if (config.span) {
  span = config.span
} else {
  if (config.type === 'line') {
    span = 12
  } else {
    span = 24
  }
}

项目跑了一段时间后，发现这个值span总是计算得有点问题，于是在本地跑了精简的代码。

const config = {
  span: 24,
  type: 'line'
}
let span = ''
span = config.span || config.type === 'line' ? 12 : 24
console.log(span)

结果输出12，奇了怪了。config.span明明是Truth，然后就是各种查找，最后定位到原因是三目运算符优先级问题，会先计算config.span || config.type === 'line'，而不是我之前的预期。所以解决办法就是后面加括号。

一个教训，记录下来。