嚐鮮 ES2019 的新功能

翻譯:瘋狂的技術宅
原文: https://medium.freecodecamp.o...

本文首發微信公衆號:jingchengyideng
歡迎關注,天天都給你推送新鮮的前端技術文章前端


ECMAScript 每一年都會發佈一個新版本,其中的提案是已經正式經過的,並分發給開發者和用戶。本文將討論該語言的最新版本,以及它又具備了什麼新功能。程序員

ES10/ES2019 在本次更新中有很大的改進。它引入了一些新的函數和方法,使開發者可以編寫更少的代碼,並提升工做效率。面試

讓咱們直接進入正題。segmentfault

flat()

flat() 是一種用於展平數組的方法。在某些時候,數組的元素仍是數組,這些類型的數組稱爲嵌套數組。數組

要取消數組的嵌套(展平它們),咱們不得不使用遞歸。如今引入 flat(),能夠用一行代碼完成。 一個被展平的數組是一個深度爲 0 的數組,flat() 接受一個參數,一個表明深度的數字。深度指的是數組內嵌套的數量。下面這個例子能夠幫你理解嵌套和深度。微信

一個深度爲 3 的嵌套數組

一個深度爲 3 的嵌套數組ide

上面是一個深度爲 3 的數組。它是一個數組在另外一個數組的內部,又在另外一個數組內部,又在另外一個數組內部 😕😕😕。一般在 JavaScript 中,數組的深度能夠爲無窮大,或者直到內存不足爲止。假設一個數組的嵌套深度爲3,而且咱們僅將其展平到深度 2,那麼主數組中仍然會存在一個嵌套數組。函數

句法

flat()句法

返回值

它返回一個扁平數組。性能

示例

clipboard.png

flat() 展平一個深度爲3的嵌套數組,參數深度爲3。動畫

若是將參數深度設爲2,咱們獲得:

clipboard.png

能夠看到輸出中仍然有一個未展平的數組。

flatMap()

flatMap() 用於展平嵌套數組並根據給出的像 map() 這樣的函數更改值。此函數做用於數組並用一個回調函數做爲參數。回調函數用於指示數組應該怎樣被展平。它就像 map 同樣工做,此外也使它變得扁平。若是你想了解有關 map 的更多信息,請查看關於this的文章。

flatMap() 可用於展平深度爲1的數組,它在內部調用 map 函數,後跟着參數深度爲1的 flat 函數,。

句法

clipboard.png

返回值

帶有操縱值的扁平數組,由提供給它的回調函數提供。就像一個map同樣。

map() + flat() => flatmap()

示例

clipboard.png

在此例中,咱們逐個顯示 map 和 flatMap 以顯示兩個函數之間的差別。 map() 返回嵌套數組,而flatMap() 的輸出除了數組的展平外,還與 map 的結構相同。

Object.fromEntries()

另外一個很是有用的函數 Object.fromEntries 用於根據提供的鍵值對生成對象。它接受一個鍵值對列表,並返回一個對象,對象的屬性由參數 entries 給出。它的做用與 Object.entries()相反。

參數

接受任何可迭代的對象,即數組。

返回值

返回有給定鍵值對的對象。

示例

clipboard.png

咱們能夠看到,當向 fromEntries() 函數提供了一個map(將值成對存儲)時,會獲得一個對象,其對應的鍵值對和 map 中同樣。

trimStart()

trimStart() 方法刪除字符串開頭的空格。 trimLeft() 是此方法的別名。

句法

clipboard.png

返回值

返回一個字符串,前面的空格被刪除。

示例

clipboard.png

能夠清楚地看到輸出中刪除的空格。

trimEnd()

trimEnd() 方法刪除字符串末尾的空格。 trimRight() 是此方法的別名。

句法

clipboard.png

返回值

它返回一個字符串,末尾全部的空格被刪除。

示例

clipboard.png

咱們能夠清楚地看到末尾的空格被刪除。

修改 catch 綁定

在 ES10 以前,咱們必須經過語法爲 catch 子句綁定異常變量,不管是否有必要。不少時候 catch 塊是多餘的。 ES10 提案使咱們可以簡單的把變量省略掉。

示例

clipboard.png

在上面的例子中,能夠看到沒有爲 catch 提供變量。

符號描述

當咱們在 JS 中建立一個 Symbol 時,能夠指定一個在之後用於調試的描述。獲得這個描述的過程有點無聊,必須再次從新構造 Symbol,並在 toString() 方法的幫助下才能訪問描述。

ES10添加了一個新的名爲 description 的只讀屬性,它返回 Symbol 的描述。

示例

clipboard.png

能夠看到使用 Symbol 的.description 屬性可以直接獲取描述。

總結

以上是當前 ES2019 標準中將要引入的一些功能。但願你喜歡這篇文章!感謝閱讀。


本文首發微信公衆號:jingchengyideng

歡迎掃描二維碼關注公衆號,天天都給你推送新鮮的前端技術文章

歡迎掃描二維碼關注公衆號,天天都給你推送新鮮的前端技術文章



歡迎繼續閱讀本專欄其它高贊文章:

相關文章
相關標籤/搜索