JavaScript 邏輯或 和 三元運算符 運算符優先級 導致的 bug

最近接手一個項目,然後收到一個 bug 說是每次接口返回的數據都是上一次的舊數據,所以我對當前項目的接口配置文件進行了排查。

經過我精心的排查,最後發現了一段可疑代碼,大概長這樣:

'12345' || '67890' ? '67890' : ''

這段代碼乍一看下,應該返回:12345,可是實際上,返回的確是:67890

代碼作者的思路我認爲是:

  • 首先判斷 12345 是否存在,如果存在,則直接返回 12345
'12345' 
'67890' ? '67890' : ''
  • 如果不存在,則進入右側的三元運算符 '67890' ? '67890' : ''
'67890' ? '67890' : ''
  • 如果67890存在,則返回67890,否則返回`’’

但是如上代碼的實際工作方式爲:

  • 首先判斷 1234567890 ,如果 12345 存在的情況下,返回 12345,否則返回 67890,所以假設以下兩者都爲 true 的情況下,都返回 12345
'12345' || '67890'
  • 然後判斷 12345是否爲 true,如果爲 true 的話,返回 67890,否則返回''
'12345' ? '67890' : ''

所以,如果我們預期 12345 爲 true 的話,則直接返回,但其實 12345爲 true,返回的確是 67890

那麼解決辦法很簡單,加個括號即可:

'12345' || ('67890' ? '67890' : '')

總結: 可以得出結論, 邏輯或 優先級大於 三元運算符

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章