你可能不知道的 JS 特性：可選鏈

今天咱們來介紹一個你可能沒見過的 JS 新特性，目前處於 Stage 3 階段，它叫做 可選鏈（optional chaining），它可能解決不少人都面對過的痛點，讓咱們來了解這下~

爲何咱們須要它

想象一下你從某個 api 獲取數據，返回的對象嵌套了好多層，這就意味着你須要寫很長的屬性訪問：

// API response object
const person = {
    details: {
        name: {
            firstName: "Michael",
            lastName: "Lampe",
        }
    },
    jobs: [
        "Senior Full Stack Web Developer",
        "Freelancer"
    ]
} 
// Getting the firstName
const personFirstName = person.details.name.firstName;

上面的代碼很容易產生錯誤，咱們通常會這麼改進:

// Checking if firstName exists
if( person &&
    person.details &&
    person.details.name ) {
        const personFirstName = person.details.name.firstName || 'stranger';
}

能夠看到爲了訪問某我的的 firstName，代碼變得很是不優雅。咱們能夠用 lodash 來優化一下：

_.get(person, 'details.name.firstName', 'stranger');

lodash 的寫法可讀性更高，可是須要引入額外的依賴，並且在團隊內部你們可能不會統一都這麼寫，那麼有沒有更好的辦法呢？

解決方案

可選鏈 就是爲了解決這個問題而誕生的。

用法

可選鏈在語法上可能看起來比較陌生，可是用了幾回以後你就會很容易適應這種寫法。

const personFirstName = person?.details?.name?.firstName;

其實就是在屬性訪問符 . 的前面加了個問號。咱們看上面語句中第一個 ?. ，從 JS 層面，它表示若是 person 的值爲 null 或者 undefined，就不會報錯而返回 undefined，不然才繼續訪問後面的 details 屬性。而若是後面的屬性訪問鏈中有任何一個屬性爲 null 或者 undefined，那麼最終的值就爲 undefined。

默認值

爲了優雅地設置默認值，咱們引入另一個特性：空值合併運算符（nullish-coalescing-operator），聽起來好像很複雜，其實也很簡單：

const personFirstName = person?.details?.name?.firstName ?? 'stranger';

這個運算符就是 ??，若是它左側表達式的結果是 undefined，personFirstName，就會取右側的 stranger。
是否是跟短路運算符 || 很像，那假如咱們把 ?? 換成 || 呢？
上面的例子中，若是 firstName 的值爲 0 或者空字符串等非 undefined 的 falsy 值，那麼最終的結果就不同了。
?? 就是爲了取代 || ，來作設置默認值這件事的。

動態屬性

若是你須要使用動態屬性，一樣很簡單：

const jobNumber = 1;
const secondJob = person?.jobs?.[jobNumber] ?? 'none';

上面的代碼中， jobs?.[jobNumber] 和 jobs[jobNumber] 的含義是同樣的，區別就是前者不會報錯。

函數或方法調用

一樣的，若是想安全調用一個方法，只須要使用 ?.()：

const currentJob = person?.jobs.getCurrentJob?.() ?? 'none';

若是 getCurrentJob 不是一個函數，currentJob 的值就是 none

如今就使用這個特性

很顯然，這個特性的兼容性感人，不過不要緊，咱們有 babel!
馬上，立刻就能讓你使用它：

babel-plugin-proposal-optional-chaining

最後的話

這個特性在不少其餘的語言如 C#，Swift 中都有實現，而且 TypeScript 中也已經加入該特性。感興趣的小夥伴還不快嘗試一下，若是嫌安裝 babel plugin 太麻煩，直接使用 lodash 的 get 也不失爲一種保守的選擇~

參考連接

原文連接
JS new feature: Optional Chaining
proposal-optional-chaining
babel-plugin-proposal-optional-chaining
babel nullish-coalescing-operator

---

歡迎關注個人公衆號：碼力全開（codingonfire）

關注並回復 副業, 獲取技術人的副業祕籍