對(duì)于JavaScript語(yǔ)言在過(guò)去幾年中進(jìn)行的所有改進(jìn)，例如散布運(yùn)算符，默認(rèn)參數(shù)值和箭頭函數(shù)，我仍然希望看到一些實(shí)現(xiàn)的功能。一種這樣的功能是可選鏈接。可選的鏈接允許開(kāi)發(fā)人員在不觸發(fā)錯(cuò)誤的情況下引用可能存在或不存在的對(duì)象屬性。

以下面的例子作為舉例說(shuō)明：

const person = {   name: "David",   skills: {     _javascript: {       frameworks: ["MooTools", "React"],     }   },   save: () => { } }; // Property that *doesn't* exist (css) person.skills.css.frameworks; // Uncaught TypeError: Cannot read property 'frameworks' of undefined

嘗試獲取未定義的父級(jí)的屬性會(huì)導(dǎo)致導(dǎo)致TypeError您的應(yīng)用程序變磚。在這種情況下，我們要檢查以確保該css屬性存在：

if(   person.skills &&    person.skills.css &&    person.skills.css.frameworks) {     // ... }

我編寫(xiě)了一個(gè)名為Objectifier的get and set實(shí)用程序，以使引用嵌套對(duì)象的屬性變得更加容易，但是有了Optional Chaining建議，我們現(xiàn)在有了一種本機(jī)方式。

可選鏈接的一個(gè)簡(jiǎn)單示例是：

const skills = person?.skills;

您可以沿著嵌套對(duì)象的行繼續(xù)執(zhí)行模式：

const frameworks = person?.skills?.javascript?.frameworks;

如果某個(gè)屬性不存在，則鏈接將停止并undefined返回?？蛇x鏈接還支持括號(hào)語(yǔ)法：

const language = "javascript"; const frameworks = person?.skills?.[language]?.frameworks;

您也可以不加任何懲罰地調(diào)用一個(gè)函數(shù)：

// Calls save if exists, otherwise nothing const frameworks = person?.save();

您甚至可以在頂級(jí)對(duì)象上使用鏈接語(yǔ)法：

addEventListener?.("click", e => { }); methodDoesntExist?.(); // undefined

您甚至可以通過(guò)可選的鏈接使用解構(gòu)：

const { frameworks, doesntExist } = person.skills?.javascript;

如果要在未定義值的情況下設(shè)置后備值，則可以使用??：

let frameworkz = person?.skills?.["javascript"]?.frameworkz ?? "react.js";

在撰寫(xiě)本文時(shí)，可選鏈接尚未出現(xiàn)在任何瀏覽器中，但是您可以在Babel在線編譯器上試用可選鏈接。

可選鏈接似乎有些爭(zhēng)議。有人認(rèn)為開(kāi)發(fā)人員應(yīng)該知道并驗(yàn)證他們正在使用的對(duì)象。另一方面，連續(xù)的嵌套屬性檢查是一場(chǎng)噩夢(mèng)。我期待JavaScript中的可選鏈接。你怎么認(rèn)為？