JavaScript中的可選鏈怎么使用

這篇文章主要介紹“JavaScript中的可選鏈怎么使用”，在日常操作中，相信很多人在JavaScript中的可選鏈怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中的可選鏈怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

簡介

在JavaScript中，我們經常需要處理JSON數據對象，而JSON數據對象的層級較深，處理其屬性值時就會顯得較為麻煩，此時可選鏈（Optional Chaining）就派上用場了。

可選鏈是一種方便的語法糖，可以簡化層級深的對象屬性訪問的過程。也就是說，在訪問一個對象中的屬性時，如果該屬性不存在，我們將不必再像以前那樣判斷對象的每一層級是否存在這個屬性，而是使用可選鏈的方式直接訪問，代碼的可讀性和簡潔性也得到了極大的提升。

下面舉個例子，假設我們有一個表示學生的json對象，里面包含了學生的姓名、年齡和地址等詳細信息。現在我們需要使用一系列“.”來訪問其中每個屬性，這時代碼就顯得很冗長：

const student = {
    name: "張三",
    age: 18,
    address: {
        province: "北京",
        city: "朝陽區",
        street: "南湖東路1號"
    }
};
let street = "";
if (student.address && student.address.province === "北京" && student.address.city === "朝陽區") {
    street = student.address.street;
}
console.log(street);

上面的代碼中，我們使用了冗長的if語句來驗證是否存在地址信息，并且訪問該地址的街道信息。

而使用可選鏈的方式，我們可以更加簡潔的實現：

const student = {
    name: "張三",
    age: 18,
    address: {
        province: "北京",
        city: "朝陽區",
        street: "南湖東路1號"
    }
};
const street = student?.address?.province === "北京" && student.address.city === "朝陽區" ? student.address.street : "";
console.log(street);

代碼中的 "?. " 是可選鏈操作符，它允許我們在屬性的值可能為 undefined 的情況下安全地訪問對象的屬性。例如，在這個示例中，如果屬性 student.address 或 student.address.city 是 undefined，則最后的結果也將是 undefined，我們就無需再做逐個判斷了，更具可讀性。

另外一個細節是可選鏈問號 ? 只能用在點 . 符號之前。如果前面的變量或表達式為 null 或 undefined，那么整個表達式的返回值就是 undefined。

值得注意的是，可選鏈操作符只在最新版的ES2020規范中被正式引入，在一些舊版本下可能會有不兼容的問題。

和其它相似方法的區別

和可選鏈類似的語法糖還有其它一些方法，如“&&”，使用它們的方式和可選鏈有些許不同。

舉個例子，我們假設有一個user對象用于存儲人們的姓名和地址信息，其中address也是一個對象類型，里面包含了省市區等信息：

const user = {
    name: "Amy",
    address: {
        province: "湖北省",
        city: "武漢市",
        area: "洪山區",
    }
}

如果要獲取用戶所在區域，我們可以使用&&運算符將它們連接起來實現類似于可選鏈式的訪問方式：

const area = user.address && user.address.area;// 洪山區

然而，這種方法在處理對象層次結構較多的對象時會顯得很麻煩。在這種情況下，可選鏈會更加直觀和方便。

我們可以使用可選鏈，以更加簡練和易于閱讀的方式來訪問屬性：

const area = user?.address?.area

到此，關于“JavaScript中的可選鏈怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！