簡介

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

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

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

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

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

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

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

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

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

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

和其它相似方法的區(qū)別

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

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

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

如果要獲取用戶所在區(qū)域，我們可以使用&&運算符將它們連接起來實現(xiàn)類似于可選鏈?zhǔn)降脑L問方式：

const area = user.address && user.address.area;// 洪山區(qū)

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

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

const area = user?.address?.area

總結(jié)

使用可選鏈可以為寫代碼帶來更加直觀和方便的體驗

以上就是JavaScript中可選鏈(?.)用法示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript可選鏈(?.)用法的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論