[TOC] #### 1. 可選鏈操作符 (?.) --- **可選鏈操作符** 允許讀取位于連接對象鏈深處的屬性值,而不必明確驗證鏈中的每個引用是否有效 `?.` 可選鏈操作符的功能類似于 `.` 鏈式操作符,不同之處在于引用為空的情況下不會引起錯誤,該表達式短路返回值 下面代碼運行有錯誤,原因很簡單, `user.age` 的值是 `undefined`,從 `undefined` 中讀取 `num` 屬性當然會報錯 ```javascript const user = { name: 'liang' } // liang console.log(user.name); // Uncaught TypeError: Cannot read properties of undefined (reading 'num') console.log(user.age.num); ``` 上面代碼拋出的錯誤會導致后面的程序無法執(zhí)行,有種場景,即使 `num` 讀取不到,也要讓程序正常執(zhí)行,應(yīng)該怎么做 ? 我們可以使用 `?.` 操作符解決這個問題: 此時 `user.age.num` 有值的話會正常輸出,找不到時返回 `undefined` 而不是直接拋出錯誤異常 ```javascript console.log(user.age?.num); ``` 當找不到 `num` 時,我們想要設(shè)置個默認值,可以配合 `??` 使用 ```javascript console.log(user.age?.num ?? 18); ``` #### 2. 空值合并操作符 (??) --- 在實際開發(fā)中,`??` 遇到的次數(shù)也不是太多,但還是非常有必要知道這個東西用法的 空值合并操作符(??): 只有當左側(cè)為 `null` 或 `undefined` 時,才會返回右側(cè)的數(shù) 與邏輯或操作符(`||`)不同,邏輯或操作符左側(cè)的值為假值時返回右側(cè)操作符。也就是說,如果使用 `||` 來為某些變量設(shè)置默認值,可能會遇到意料之外的問題,比如遇到假值 `''`、`0`、`false` 通過以下代碼可驗證區(qū)別,當 user 對象中沒有 sex 屬性時默認值為 2(0 女 1 男 2 未知) ```javascript const user = { name: 'maria', sex: 0 } console.log(user.sex ?? 2); // 0 console.log(user.sex || 2);// 2 ``` **空值合并操作符 (??)** 和 **可選鏈操作符 (?.)** 配合使用就非常美妙 ```javascript console.log(user.age?.num ?? 18); ```