JavaScript 可選鍊操作符&&空值合并操作符

最近 開始接觸到一些ES6以後的新特性 使用起來确實友善了不少

尤其是最近有一個項目 在方法中需要傳入index 但是在做非空驗證的時候 如果傳入的index是0 也會被判斷為false 這就十分頭疼了

備援的判斷不僅使代碼的可讀性變差 而且會使代碼變得不簡潔

但是在接觸到可選鍊操作符後 emmmmm 這也太香了 避免了 && 和 多餘的非空校驗

是以決定以此為開始  陸續的寫一些ES6 ES7...之後的新特性

這裡我引用一段MDN上的解釋

可選鍊操作符( ?. )允許讀取位于連接配接對象鍊深處的屬性的值，而不必明确驗證鍊中的每個引用是否有效。?. 操作符的功能類似于 . 鍊式操作符，不同之處在于，在引用為空(nullish ) (null 或者 undefined) 的情況下不會引起錯誤，該表達式短路傳回值是 undefined。與函數調用一起使用時，如果給定的函數不存在，則傳回 undefined。

或許 你還是?????

不要急  我們來看一道例題

上述例子adventurer.weapon?.name

我們試圖去尋找adventurer對象下的weapon屬性下的name屬性

adventurer對象有weapon屬性 是以傳回我們可以取出我們的大師劍

然後是adventurer.savePrincess?.()

顯然adventurer下沒有savePrincess這個方法 是以救公主？？？ 不存在的 直接傳回undefined

最後是adventurer.shield?.name

同樣的 我們發現 adventurer對象下也沒有shield屬性 是以直接傳回undefined

好啦 至此 我們大概了解了可選鍊是怎麼一回事

接下來 我們來看看 可選鍊有什麼需要注意的地方

當在表達式中使用可選鍊時，如果左操作數是 null 或 undefined，表達式将不會被計算，例如：

最後再舉一個自己在實際開發中的例子

假如有一個方法setStudentResult(action) 它接收一個對象action

為了讓我們的代碼健壯 我們必須在方法内部做出參數的非空校驗 顯然下面這樣是不行的

如果我們直接調用setStudent() 顯然整個程式都會崩潰

是以在以前 我們可以将方法體改成這樣

但是 如果使用可選鍊操作符 我們就可以将方法定義成如下

可以看到 無論是可讀性 還是簡潔程度 可選鍊操作符都更勝一籌

還是引用一段MDN上解釋

空值合并操作符（??）是一個邏輯操作符，當左側的操作數為 null 或者 undefined 時，傳回其右側操作數，否則傳回左側操作數。

我們知道 || 邏輯或運算符 也具有相似的功能

也就是在 || 左側操作數為假值時 會傳回右側 操作數

JS中的假值有

''

NaN

null

undefined

是以設想一個場景 我們對一個function中的參數使用 || 運算符 來判斷使用者是否輸入

上述代碼我們用 || 運算符來判斷使用者 使用者輸入的合法性

但是這樣我們就無法排除 0 這種情況

如果使用者就是輸入了0 但是0依舊是一個假值 是以還是會傳回 || 操作符右側是操作數

這就與我們的預期不一緻了

而 ?? 空值合并操作符就隻是檢驗了 null 和 undefined

與 OR 和 AND 邏輯操作符相似，當左表達式不為 null 或 undefined 時，不會對右表達式進行求值

兩個操作符都是針對 undefined 和 null 兩個值

是以我們可以結合這兩個操作符