JavaScript基礎語法之 || 和 ?? 的踩坑記錄

在前端開發過程中，我們在設置預設值的時候，會經常用到 || 和 ?? , 但是這兩者有什麼區別呢？分別在什麼場景下麵使用呢，會有哪些坑呢，今天我們來梳理下呢。

|| 的語法作用

console.log(null || 1)                //輸出 1
console.log(undefined || 1)       //輸出1     
console.log(0 || 1)                   //輸出1 
console.log('' || 1)                   //輸出1 
console.log(1 || null)               //輸出1 
console.log(undefined || '')      //輸出''
console.log(undefined || 0)      //輸出0
console.log(undefined || null)   //輸出null
console.log(null || undefined)   //輸出undefined
console.log('' || undefined)   //輸出undefined
console.log(0 || undefined)   //輸出undefined

在這裡可以看出，使用 || 的時候，當第一個值為非0非null非''非undefined的時候，優先取第一個值，而當第一個值是0或''或null或undefined的時候，則優先取第二個參數的值。

?? 的語法作用

console.log(null ?? 1)                //輸出 1
console.log(undefined ?? 1)       //輸出1     
console.log(0 ?? 1)                   //輸出0 
console.log('' ?? 1)                   //輸出'' 
console.log(1 ?? null)               //輸出1 
console.log(undefined ?? '')      //輸出''
console.log(undefined ?? 0)      //輸出0
console.log(undefined ?? null)   //輸出null
console.log(null ?? undefined)   //輸出undefined
console.log('' ?? undefined)   //輸出''
console.log(0 ?? undefined)   //輸出0

在這裡可以看出，使用 ?? 的時候，當第一個值為非null非undefined的時候，優先取第一個值，而當第一個值是null或undefined的時候，則優先取第二個參數的值。

|| 和 ?? 的對比總結

對比 || 和 ??後，發現 || 的處理是針對於0或空或null或undefined都去獲取後面的預設值，而??則是針對於null或undefined的時候，去獲取後面的預設值，則對應的場景如下：

1. 當一個變數值可能為空0或者''的時候，希望最後展示的是預設值的時候，則只能使用 || 來處理
2. 當一個變數值可能為null或undefined的時候，希望最後展示的是預設值的時候，則優先使用 ?? 來處理