這篇文章想分享 2020~2022這三年間,三個超級實用的feature,包含:
- Optional Chaining(?.)
- Nullish Coalescing(??)
- Array.prototype.at()
JS 每年都在出新的功能,處理特定議題、完善 promise、完善 class,完善ESMoudule⋯⋯,但這些其實沒有那麼容易用到🤪 。遇到了再去查,問題一定能夠被解決。
這裡分享三個絕對用得到的 feature ,應用上都非常的廣泛,雖然都有替代的寫法,但知道這些一定能夠對開發有很大的幫助。
Optional Chaining(?.)
Js 如果要拿 object 裡的 kay-value pair ,最容易遇到的就是 Uncaught TypeError。Optional Chaining 很好的解決了這個問題。
Syntax
reference?.prop
如果 reference 是 null 或 undefined,整個 expression 會直接 return undefined。
如果你想知道一家咖啡廳的咖哩拌飯價格,正常來說你應該要檢查咖啡廳有沒有賣咖哩拌飯,然後再問咖哩拌飯的價格。
但有了 Optional Chaining ,如果咖啡廳沒有咖哩拌飯,expression 會直接是undefined,不用再透過 if 並多一層縮排 。甚至 method 跟 array 都可以用 Optional Chaining,十分的方便。
Nullish Coalescing(??)
Syntax
leftExpress??rightExpress
如果 leftExpress 是 nullish (null 或 undefined),回傳 rightExpress;否則 回傳 leftExpress。
有個很像的運算子 ,||
。如果左邊的 expression 是 falsy,||
會回傳右邊的 expression。
??
跟 ||
最大的不同是 nullish 跟 flasy 的概念,falsy 包含 0 跟 false,nullish 不包含 0 跟 false。有的時候你可能想要判斷是「這個數值存不存在」,這時用 nullish 就可以輕鬆辦到。
Array.prototype.at()
如果你寫過 python ,你應該知道 python 取得 list 最後一個 element 有多方便。 my_list[-1]
就輕鬆拿到最後一個 element。但 JS 中 myArray[-1]
這是object 取值的語法,只會把 myArray 當成 object 試圖取出 key 是 -1 的值,而得到 undefined。
而這樣的語法在 2021 被 V8支援 ,在 ES 2022 進入標準,降臨 JS 世界。可以跟以前麻煩的 myArray[myArray.length-1]
說再見了,真香。
結論
JS 推出很多新的語法,本篇介紹超級實用的三個語法 Optional Chaining(?.)、Nullish Coalescing(??)、Array.prototype.at(),希望可以幫助到你。
使用的時候注意瀏覽器支援的問題,還有 polyfill 是否能順利運作,開發環境可以隨意的更新,但使用者的瀏覽器可不能。Array.prototype.at() 在發文的當下,還不被 safari 支援。
Reference
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at
- https://v8.dev/features/at-method
- https://tc39.es/proposal-relative-indexing-method/#sec-%typedarray.prototype%-additions
如果這篇文章對你有幫助,可以 follow 我的 medium ,幫助我的文章能被設定為可被引擎搜尋。