Typescript“可選鏈”——拯救你的代碼

TypeScript 3.7 實現了呼聲最高的 ECMAScript 功能之一:可選鏈(Optional Chaining)!

那麼什麼是可選鏈呢?簡單的說: 可選鏈的核心是 ?. 運算符,用於可選的屬性訪問。


直接看代碼

<code># 以前我們寫東西是這樣的,三層屬性足夠我們寫出一條裹腳布~const street = user && user.address && user.address.street;# 以後我們寫東西是這樣的,代碼少,可讀性好const street = user?.address?.street/<code>

當然新語法使用的時候有個坑一定要注意

你希望如果 response 或者 response.settings 或者 response.settings.n 不存在(值為 null 或者 undefined)時,result 保底值為 100。

<code>const result = response?.settings?.n || 100/<code>

但是上面代碼在 n 為 0 的時候,也會讓 result 變成 100,你實際上希望此時 result 為 0。

這個時候你就需要使用雙 ?? 來實現了。

<code>const result = response?.settings?.n ?? 100/<code>

當然可選鏈是ECMAScript的提案,js和nodejs在不久的將來應該都會加入對其的支持,不想等的話,可以使用babel的plugin-proposal-optional-chaining來支持。

以後們的口號就是用,問號來解決問題哈哈


Typescript“可選鏈”——拯救你的代碼


分享到:


相關文章: