JavaScript中的可選鏈怎么使用

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

簡(jiǎn)介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const area = user?.address?.area

到此，關(guān)于“JavaScript中的可選鏈怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！