[Frontend Tips] JS: Optional Chaining, 再也不怕一長串的屬性調

K_B_Z 發布于2019-08-22 14:54 / 1784人閱讀

摘要：剛才看了下一個新特性，這是干啥用的呢過去在屬性鏈的調用中，很容易因為某個屬性不存在而導致之后出現的錯誤。要注意操作符是，而不是多帶帶的。類似的，如果需要取屬性鏈中某函數并執行，就應該是。

剛才看了下一個 JS 新特性——「Optional Chaining」，這是干啥用的呢？

過去在 Object 屬性鏈的調用中，很容易因為某個屬性不存在而導致之后出現Cannot read property xxx of undefined的錯誤。

const obj = {
    qwe: {
        asd: {
            zxc: "666"
        }
    }
}

console.log(obj.qwe.asd.zxc); // 666
console.log(obj.abc.def.ghi); // Uncaught TypeError: Cannot read property "def" of undefined...

那 optional chaining 就是添加了?.這么個操作符，它會先判斷前面的值，如果是 null 或 undefined，就結束調用、返回 undefined。

console.log(obj?.abc?.def?.ghi); // undefined

要注意操作符是?.，而不是多帶帶的？。因此，如果屬性鏈中取某個 Array 的元素，應該是obj?.qwe?.arr?.[0]。類似的，如果需要取屬性鏈中某函數并執行，就應該是obj?.qwe?.func?.()。

這個特性可以說是非常實用了，不過它現在處于 stage-1 階段，估計進入標準還有段時間。不過 Babel v7 beta 已經添加了此特性的插件，想現在用起來的同學可以安裝起來。

Reference

babel/packages/babel-plugin-proposal-optional-chaining at master · babel/babel

tc39/proposal-optional-chaining

Optional Chaining may be coming to JavaScript

云服務器 GPU云服務器一長串 js中串的替換方法小tips層 js CSS_JS_Tips

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92985.html

js判斷鼠標進入容器的方向小解

摘要：有不對的地方，或者有更好的理解，請告訴我，謝謝原理以容器的中心點作為圓心，以高和寬的最小值作為直徑畫圓，將圓以，，，，，，，劃分為四個象限，鼠標進入容器時的點的值在這四個象限里分別對應容器邊框的下，右，上，左。 $(#wrap).bind(mouseenter mouseleave,function(e) { var w = $(this).width(); var h...

fantix 2019-08-20 10:31 評論0 收藏0
精讀《Optional chaining》

摘要：由于具備一定的使用場景，而且支持方式零成本改寫為即可，所以就支持它吧不支持的特性下面三個特性不支持，原因是沒什么使用場景安全的安全的上面兩者的結合首先看一個對象，如果出來的結果是，那這個返回值使用起來也沒有意義。 1. 引言備受開發者喜愛的特性 Optional chaining 在 2019.6.5 進入了 stage2，讓我們詳細讀一下草案，了解一下這個特性的用法以及討論要點。 ...

cncoder 2019-08-23 18:09 評論0 收藏0
走近正則：仿Nodejs的Url模塊到前端

摘要：正則學起來說真的，不去正兒八經的學正則，對付一般的工作是沒啥問題的，雖然我們可能會經常用到，但畢竟度娘能提供大多時候你想要的可當我看一些框架的源碼，總會被里面一長串一長串的正則給嚇到之前一篇博客里有關于簡單的爬蟲實踐，其實離達到我預期的效果正則學起來說真的，不去正兒八經的學正則，對付一般的工作是沒啥問題的，雖然我們可能會經常用到replace，但畢竟度娘能提供大多時候你想要的；可當...

HitenDev 2019-08-20 10:33 評論0 收藏0
避免取值時出現Cannot read property 'xx' of unde

摘要：由于是以空函數為代理對象，我們可以將執行它，觸發。中會遍歷數組依次取值，如果發現無法繼續取值則，跳出循環。本文來自我的博客，歡迎大家去GitHub上star我的博客我們在取值特別是鏈式取值的時候，常常會遇到Cannot read property xx of undefined的錯誤，如何避免這種情況的發生呢？這里有幾種方法以供參考使用成熟的庫方法這是最簡單的一種手段：只用引入...

fantix 2019-08-23 15:23 評論0 收藏0
JS基礎篇--通過JS生成由字母與數字組合的隨機字符串

摘要：若是偶數，返回的數值字符串都是短的，若是奇數，則返回的將是一個很大長度的表示值。若則都是數字組成，才會包含字母。在項目中可能需要隨機生成字母數字組成的字符，如生成3-32位長度的字母數字組合的隨機字符串（位數不固定）或者生成43位隨機字符串（位數固定）使用Math.random()與toString()方法的結合先看一下這個方式： Math.random().toString(3...

zhangrxiang 2019-08-21 18:29 評論0 收藏0