ECMAScript 提案使用小記

Any application that can be written in JavaScript, will eventually be written in JavaScript. — Atwood's Law

1. optional chaining

前端一個常見的編程模式是使用短路檢查來獲取具備 tree 結構的值/方法。例如：

// 獲取 list 對象
res && res.data && res.data.list
// 調用 sendBeacon 方法
navigator.sendBeacon && navigator.sendBeacon('/log', analyticsData())
複製代碼

爲了處理 deep tree 結構，咱們不得不經過逐層去判斷，在代碼簡潔性和編程模式上大打折扣，作了太多 Repeat 的工做，因此就有了 optional chaining 這個提案，但在其餘語言不是個新東西，相似Swift、C#已實現相似的功能了。

語法

obj?.prop // 訪問靜態可選屬性 optional static property access
obj?.[expr] // 訪問動態可選屬性 optional dynamic property access
func?.(...args) // 訪問可選函數
複製代碼

由此，開始的例子就能夠這麼寫：

// 獲取 list 對象
res?.data?.list
// 調用 sendBeacon 方法
navigator?.sendBeacon('/log', analyticsData())
複製代碼

目前這個提案位於 Stage 2 階段，很大機率會歸入正式規範，能夠配合 Babel 插件 @babel/plugin-proposal-optional-chaining 進行食用。

具體技術細節請參考 tc39/proposal-optional-chaining

2. nullish coalescing

另外一個常見的編程模式上在獲取具備 tree 結構的屬性上，使用 || 操做符來設定默認值。例如：

const list = res.data.list || []
複製代碼

既當 || 左邊的值爲 falsy 時，返回右邊的默認值，對於值爲 undefined 或 null 這樣 falsy 值是沒問題的，但在某些場景下， 0 、'' 、 false 是程序所指望的 falsy 值，不該該拿到默認值，因此就有了 nullish coalescing 的提案，解決有意義的 falsy 值被忽略的問題。

語法

falsyValue ?? 'default value'
複製代碼

使用上，只對於 undefined 和 null 獲取默認值：

const undefinedValue = response.settings.undefinedValue ?? 'some other default' // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default' // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!' // result: ''
const animationDuration = response.settings.animationDuration ?? 300 // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true // result: false
複製代碼

這個提案一樣位於 Stage 2，可配合 @babel/plugin-proposal-nullish-coalescing-operator 進行食用。

具體技術細節請參考 [tc39/proposal-nullish-coalescing](github.com/tc39/propos…)

3. pipeline operator

管道操做符在 Unix 操做系統、F#、julia, 都有相應的實現，其目標是簡化函數調用過程，增長代碼的可讀性：

語法

someValue |> fn1 [|fn2 |fn2...]
複製代碼

例如，想要將字符串複製一次+首字母大寫+追加 ！號，咱們能夠有這幾個函數：

function doubleSay(str) {
  return str + ', ' + str
}
function capitalize(str) {
  return str[0].toUpperCase() + str.substring(1)
}
function exclaim(str) {
  return str + '!'
}
複製代碼

在這以前，可經過函數嵌套調用：

let result = exclaim(capitalize(doubleSay('hello')))
result //=> "Hello, hello!"
複製代碼

而使用了管道操做符：

let result = 'hello' |> doubleSay |> capitalize |> exclaim
result //=> "Hello, hello!"
複製代碼

目前這個提案位於 Stage 1 階段，緣由是爭議比較大, 食用的話請配合@babel/plugin-proposal-pipeline-operator

參考：tc39/proposal-pipeline-operator

EOF

提案是爲了建設功能更日臻完善的 ES 而準備的，具備舉足長遠的意義，感興趣的小夥伴可關注官方倉庫 追蹤最新動態。;)

以上。