日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
鞏固一下 JS 可選 (?.)操作符號，原來函數(shù)也可以用可選寫法，又學到了！

可選的鏈接?.操作符用于使用隱式空檢查訪問嵌套對象屬性。

概述

如何使用null (null和undefined)檢查訪問對象的嵌套屬性?假設我們必須從后臺的接口訪問用戶詳細信息。

可以使用嵌套的三元運算符 :

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

或者使用 if 進行空值檢查：

 
 
 
 
      
  
  
  
  1. let userName = null; 
    2.   
  
  
  
  2. if(response && response.data && response.data.user){ 
    3.   
  
  
  
  3.   userName = response.data.user.name; 
    4.   
  
  
  
  4. } 
    5.

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

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

上述代碼的共同之處在于，鏈接有時會非常冗長，并且變得更難格式化和閱讀。這就是 ?.操作符被提出來的原因，我們改下 ?. 重構上面的代碼：

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

很 nice 呀。

語法

?. 語法在ES2020 中被引入，用法如下：

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

使用?.操作符

假設我們有一個 user 對象：

 
 
 
 
      
  
  
  
  1. const user = { 
    2.   
  
  
  
  2.   name: "前端小智", 
    3.   
  
  
  
  3.   age: 21, 
    4.   
  
  
  
  4.   homeaddress: { 
    5.   
  
  
  
  5.     country: "中國" 
    6.   
  
  
  
  6.   }, 
    7.   
  
  
  
  7.   hobbies: [{name: "敲代碼"}, {name: "洗碗"}], 
    8.   
  
  
  
  8.   getFirstName: function(){ 
    9.   
  
  
  
  9.     return this.name; 
    10.   
  
  
  
  10.   } 
    11.   
  
  
  
  11. } 
    12.

屬性

訪問存在的屬性：

 
 
 
 
      
  
  
  
  1. console.log(user.homeaddress.country);  
    2.   
  
  
  
  2. // 中國 
    3.

訪問不存在的屬性：

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

改用 ?. 訪問不存在的屬性：

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

方法

訪問存在的方法：

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

訪問不存在的方法：

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

改用 ?. 訪問不存在的方法：

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

數(shù)組

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

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

訪問不存在的方法：

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

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

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

?? 操作符

我們知道 ?. 操作符號如果對象不存在，剛返回 undefined，開發(fā)中可能不返回 undefined 而是返回一個默認值，這時我們可以使用雙問題 ?? 操作符。

有點抽象，直接來一個例子：

 
 
 
 
      
  
  
  
  1. const country = user.officeaddress?.country; 
    2.   
  
  
  
  2. console.log(country); 
    3.   
  
  
  
  3. // undefined 
    4.

需要返回默認值：

 
 
 
 
      
  
  
  
  1. const country = user.officeaddress?.country ?? "中國"; 
    2.   
  
  
  
  2. console.log(country); 
    3.   
  
  
  
  3. // 中國 
    4.

~完，我是刷碗智，SPA走起來，下期見!

作者：Ashish Lahoti 譯者：前端小智 來源：CSS-Tricket

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

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯(lián)系大遷世界公眾號。


文章標題：鞏固一下 JS 可選 (?.)操作符號，原來函數(shù)也可以用可選寫法，又學到了！
當前地址：http://www.5511xx.com/article/cdchcpp.html