簡(jiǎn)介

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

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

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

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

上面的代碼中，我們使用了冗長(zhǎng)的if語(yǔ)句來(lái)驗(yàn)證是否存在地址信息，并且訪問(wèn)該地址的街道信息。

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

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

代碼中的 "?. " 是可選鏈操作符，它允許我們?cè)趯傩缘闹悼赡転?undefined 的情況下安全地訪問(wèn)對(duì)象的屬性。例如，在這個(gè)示例中，如果屬性 student.address 或 student.address.city 是 undefined，則最后的結(jié)果也將是 undefined，我們就無(wú)需再做逐個(gè)判斷了，更具可讀性。

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

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

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

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

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

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

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

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

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

我們可以使用可選鏈，以更加簡(jiǎn)練和易于閱讀的方式來(lái)訪問(wèn)屬性：

const area = user?.address?.area

總結(jié)

使用可選鏈可以為寫代碼帶來(lái)更加直觀和方便的體驗(yàn)

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

最新評(píng)論