一個由運算子優先順序引發的js程式碼慘案
阿新 • • 發佈:2018-11-28
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'
,而不是我之前的預期。所以解決辦法就是後面加括號。
一個教訓,記錄下來。