日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

可選的鏈接?.操作符用于使用隱式空檢查訪問(wèn)嵌套對(duì)象屬性。

概述

如何使用null (null和undefined)檢查訪問(wèn)對(duì)象的嵌套屬性?假設(shè)我們必須從后臺(tái)的接口訪問(wèn)用戶詳細(xì)信息。

可以使用嵌套的三元運(yùn)算符 :

 
 
 
 
  
  
  
  
const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null) : null) : null; 
 
 
 

或者使用 if 進(jìn)行空值檢查：

 
 
 
 
  
  
  
  
let userName = null; 
  
  
  
  
if(response && response.data && response.data.user){ 
  
  
  
  
  userName = response.data.user.name; 
  
  
  
  
} 
 
 
 

或者更好的方法是使它成為一個(gè)單行鏈接的&&條件，像這樣:

 
 
 
 
  
  
  
  
const userName = response && response.data && response.data.user && response.data.user.name; 
 
 
 

上述代碼的共同之處在于，鏈接有時(shí)會(huì)非常冗長(zhǎng)，并且變得更難格式化和閱讀。這就是 ?.操作符被提出來(lái)的原因，我們改下 ?. 重構(gòu)上面的代碼：

 
 
 
 
  
  
  
  
const userName = response?.data?.user?.name; 
 
 
 

很 nice 呀。

語(yǔ)法

?. 語(yǔ)法在ES2020 中被引入，用法如下：

 
 
 
 
  
  
  
  
obj.val?.pro  // 如果`val`存在，則返回`obj.val.prop`，否則返回 `undefined`。 
  
  
  
  
 
  
  
  
  
obj.func?.(args) // 如果 obj.func 存在，則返回 `obj.func?.(args)`，否則返回 `undefined`。 
  
  
  
  
 
  
  
  
  
obj.arr?.[index] // 如果 obj.arr 存在，則返回 `obj.arr?.[index]`，否則返回 `undefined`。 
 
 
 

使用?.操作符

假設(shè)我們有一個(gè) user 對(duì)象：

 
 
 
 
  
  
  
  
const user = { 
  
  
  
  
  name: "前端小智", 
  
  
  
  
  age: 21, 
  
  
  
  
  homeaddress: { 
  
  
  
  
    country: "中國(guó)" 
  
  
  
  
  }, 
  
  
  
  
  hobbies: [{name: "敲代碼"}, {name: "洗碗"}], 
  
  
  
  
  getFirstName: function(){ 
  
  
  
  
    return this.name; 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 

屬性

訪問(wèn)存在的屬性：

 
 
 
 
  
  
  
  
console.log(user.homeaddress.country);  
  
  
  
  
// 中國(guó) 
 
 
 

訪問(wèn)不存在的屬性：

 
 
 
 
  
  
  
  
console.log(user.officeaddress.country);  
  
  
  
  
// throws error "Uncaught TypeError: Cannot read property 'country' of undefined" 
 
 
 

改用 ?. 訪問(wèn)不存在的屬性：

 
 
 
 
  
  
  
  
console.log(user.officeaddress?.country);  
  
  
  
  
// undefined 
 
 
 

方法

訪問(wèn)存在的方法：

 
 
 
 
  
  
  
  
console.log(user.getFirstName());  
  
  
  
  
// 前端小智 
 
 
 

訪問(wèn)不存在的方法：

 
 
 
 
  
  
  
  
console.log(user.getLastName());  
  
  
  
  
// throws error "Uncaught TypeError: user.getLastName is not a function"; 
 
 
 

改用 ?. 訪問(wèn)不存在的方法：

 
 
 
 
  
  
  
  
console.log(user.getLastName?.());  
  
  
  
  
// "undefined" 
 
 
 

數(shù)組

訪問(wèn)存在的數(shù)組：

 
 
 
 
  
  
  
  
console.log(user.hobbies[0].name);  
  
  
  
  
// "敲代碼" 
 
 
 

訪問(wèn)不存在的方法：

 
 
 
 
  
  
  
  
console.log(user.hobbies[3].name);  
  
  
  
  
// throws error "Uncaught TypeError: Cannot read property 'name' of undefined" 
 
 
 

改用 ?. 訪問(wèn)不存在的數(shù)組：

 
 
 
 
  
  
  
  
console.log(user.dislikes?.[0]?.name);  
  
  
  
  
// "undefined" 
 
 
 

?? 操作符

我們知道 ?. 操作符號(hào)如果對(duì)象不存在，剛返回 undefined，開(kāi)發(fā)中可能不返回 undefined 而是返回一個(gè)默認(rèn)值，這時(shí)我們可以使用雙問(wèn)題 ?? 操作符。

有點(diǎn)抽象，直接來(lái)一個(gè)例子：

 
 
 
 
  
  
  
  
const country = user.officeaddress?.country; 
  
  
  
  
console.log(country); 
  
  
  
  
// undefined 
 
 
 

需要返回默認(rèn)值：

 
 
 
 
  
  
  
  
const country = user.officeaddress?.country ?? "中國(guó)"; 
  
  
  
  
console.log(country); 
  
  
  
  
// 中國(guó) 
 
 
 

~完，我是刷碗智，SPA走起來(lái)，下期見(jiàn)!

作者：Ashish Lahoti 譯者：前端小智 來(lái)源：CSS-Tricket

原文：https://codingncoepts.com/javascript/optional-chaining-opeator-javascript/

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

網(wǎng)頁(yè)標(biāo)題：鞏固一下 JS 可選 (?.)操作符號(hào)，原來(lái)函數(shù)也可以用可選寫(xiě)法，又學(xué)到了！
鏈接URL：http://www.dlmjj.cn/article/cdchcpp.html