[TOC] >[success] # 對象某個屬性不存在的判斷 ~~~ 1.cannot read property of undefined 報錯處理方式 ~~~ >[danger] ##### 使用&& 斷路運算符處理 ~~~ const obj = { user:{ name:"w", } }; // 通過短路運算符進行訪問行嗅探實現代碼 obj && obj.user && obj.user.name ~~~ >[danger] ##### 通過||單元設置默認保底值 ~~~ const obj = { user:{ name:"w", } }; ((obj||{}).user||{}).name ~~~ >[danger] ##### 使用try catch 捕獲異常 ~~~ const obj = { user:{ name:"w", } }; let res; try{ res = obj.user.name }catch(e){ res = undefined; } ~~~ >[info] ## 可選鏈 ?. [參考鏈接](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining) ~~~ 1.當對象某個屬性不存時候，不會引起錯誤，該表達式短路返回值是 、 undefined。與函數調用一起使用時，如果給定的函數不存在，則返回 undefined 2.'obj.name?.age' 以這個案例說明，可選鏈保證的是'obj.name'這個值 既不是undefined 也不是null 的情況下才能調用name，如果是的話就返回 undefined· 3.'可選鏈與函數使用'，函數調用時如果被調用的方法不存在，使用可選鏈可 以使表達式自動返回undefined而不是拋出一個異常，但是如果存在卻不是 一個函數會報錯 let result = someInterface.customMethod?.(); 4.可選鏈不能進行賦值操作 let object = {}; object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment 5.'斷路計算'下面的例子如果左面操作是null 或者undefined 就形成斷路 后面的屬性也不會進行計算 let potentiallyNullObj = null; let x = 0; let prop = potentiallyNullObj?.[x++]; console.log(x); // x 將不會被遞增，依舊輸出 0 6.語法 obj?.prop obj?.[expr] arr?.[index] func?.(args) ~~~ ~~~ const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // undefined console.log(adventurer.someNonExistentMethod?.()); // undefined function fn(callback){ return callback?.() // callback && callback() } ~~~ * 使用空值合并操作符 ~~~ let customer = { name: "Carl", details: { age: 82 } }; let customerCity = customer?.city ?? "暗之城"; console.log(customerCity); // “暗之城” ~~~ >[danger] ##### 對空值合并一個說明解釋 ~~~ 1.空值合并操作符'??' 和 "邏輯操作符||"的區別，空值合并操作符只有當左面 操作數為 null 或者 undefined 時，返回其右側操作數，否則返回左側操作數 ，邏輯操作符|| 是一個布爾邏輯運算符，左側的操作數會被強制轉換成布爾 值用于求值。任何假值（0， ''， NaN， null， undefined）都返回右側值 ~~~ * 案例 ~~~ 1.可以看出非null 或者 undefined 是不會影響到空值合并操作符的 ~~~ ~~~ let count = 0; let text = ""; let qty = count || 42; let message = text || "hi!"; console.log(qty); // 42 console.log(message); // "hi!" let qty1 = count ?? 42 let message1 = text ?? "hi!" console.log(qty1); // 0 console.log(message1); // 空字符 ~~~ * 案例 當返回值是null 或undefined 也會出現短路效果 ~~~ function A() { console.log('函數 A 被調用了'); return undefined; } function B() { console.log('函數 B 被調用了'); return false; } function C() { console.log('函數 C 被調用了'); return "foo"; } console.log( A() ?? C() ); // 依次打印 "函數 A 被調用了"、"函數 C 被調用了"、"foo" // 因為A返回了undefined 所以執行右側 console.log( B() ?? C() ); // 依次打印 "函數 B 被調用了"、"false" // 因為左側返回的是非undefined 和 null 因此只執行左側 ~~~