天天看點

[譯] 是的,ES2017 (ES8)來了

<b>本文講的是[譯] 是的,ES2017 (ES8)來了,</b>

<b></b>

校對者:

ES8 或者說是 ES2017 已經在今年6月底的時候被 TC39 正式釋出。似乎我們在最近的一年裡就已經談論了很多有關 ECMA 的事情。現在的 ES 标準每年釋出一次。我們都知道 ES6 是在2015年釋出的,ES7 是在2016年釋出的,但是估計會有很少數人知道 ES5 是在何時釋出的。答案是2009年,是在 JavaScript 逐漸變的流行之前釋出的。

JavaScript,作為一門處于高速發展期的開發語言,正在變的越來越完善、穩定。我們必須擁抱這些變化,并且我們需要把ES8加入到我們的技術棧中。

[譯] 是的,ES2017 (ES8)來了

在 String 對象中,ES8 增加了兩個新的函數: padStart 和 padEnd 。正如其名,這倆函數的作用就是在字元串的頭部和尾部增加新的字元串,并且傳回一個具有指定長度的新的字元串。你可以使用指定的字元、字元串或者使用函數提供的預設值-空格來填充源字元串。具體的函數申明如下:

正如你所看到的,這倆函數的第一個參數(必輸)是 <code>targetLength</code> ,這個參數指的是設定這倆函數最後傳回的字元串的長度。第二個參數 <code>padString</code> 是可選參數,代表你想要填充的内容,預設值是空格。具體代碼示例如下:

目前浏覽器的支援情況如下(資訊來自 MDN ):

[譯] 是的,ES2017 (ES8)來了

在 Object 中,ES8 也新增了兩個新的函數,分别是 <code>Object.values</code> 函數和 <code>Object.entries</code>函數。<code>Object.values</code> 函數将會傳回一個數組,該數組的内容是函數參數(一個對象)可周遊屬性的屬性值。數組中得到的屬性值的順序與你在對參數對象使用 <code>for in</code> 語句時擷取到的屬性值的順序一緻。函數聲明如下:

參數 <code>obj</code> 就是源對象,它可以是一個對象或者一個數組(因為數組可以看作是數組下标為 key ,數組元素為 value 的特殊對象)。具體的代碼示例如下:

目前浏覽器對于 <code>Object.values</code> 函數的支援情況如下(資訊來自 MDN ):

[譯] 是的,ES2017 (ES8)來了

介紹完 <code>Object.values</code> 函數,接下來繼續介紹 <code>Object.entries</code> 函數。 <code>Object.entries</code> 函數與 <code>Object.values</code> 函數類似,也是傳回一個數組,隻不過這個數組是一個以源對象(參數)的可枚舉屬性的鍵值對為數組 <code>[key, value]</code> 的 n 行 2 列的數組。它的傳回順序與<code>Object.values</code> 函數類似。它的函數聲明如下:

示例代碼如下:

目前浏覽器對于 <code>Object.entries</code> 函數的支援情況如下(資訊來自 MDN ):

[譯] 是的,ES2017 (ES8)來了

Object 中還有一個新成員,那就是 <code>Object.getOwnPropertyDescriptors</code> 函數。該函數傳回指定對象(參數)的所有自身屬性描述符。所謂自身屬性描述符就是在對象自身内定義,不是通過原型鍊繼承來的屬性。函數聲明如下:

<code>obj</code> 參數即為源對象,該函數傳回的每個描述符對象可能會有的 key 值分别是:<code>configurable</code>、<code>enumerable</code>、<code>writable</code>、<code>get</code>、<code>set</code>和<code>value</code>。示例代碼如下:

描述符資料非常重要,尤其是在裝飾器上。該函數的浏覽器支援情況如下(資訊來自 MDN ):

[譯] 是的,ES2017 (ES8)來了

此處結尾逗号指的是在函數參數清單中最後一個參數之後的逗号以及函數調用時最後一個參數之後的逗号。ES8 允許在函數定義或者函數調用時,最後一個參數之後存在一個結尾逗号而不報 <code>SyntaxError</code> 的錯誤。示例代碼如下:

函數聲明時
函數調用時

ES8的這項新特性受啟發于對象或者數組中最後一項内容之後的逗号,如 <code>[10, 20, 30,]</code> 和<code>{ x: 1, }</code> 。

由 <code>async</code> 關鍵字定義的函數聲明定義了一個可以異步執行的函數,它傳回一個<code>AsyncFunction</code> 類型的對象。異步函數的内在運作機制和 <code>Generator</code> 函數非常類似,但是不能轉化為 <code>Generator</code> 函數。

上述代碼中, <code>sayHello</code> 函數的調用将會導緻在2秒之後列印 <code>Hello, es8</code> 。繼續來看一段代碼:

輸出将會變成:

之是以會列印上述内容,那是因為異步函數不會阻塞程式的繼續執行。

譯者注:

異步函數的浏覽器支援情況如下(資訊來自 MDN ):

[譯] 是的,ES2017 (ES8)來了

當記憶體被共享時,多個線程可以并發讀、寫記憶體中相同的資料。原子操作可以確定那些被讀、寫的值都是可預期的,即新的事務是在舊的事務結束之後啟動的,舊的事務在結束之前并不會被中斷。這部分主要介紹了 ES8 中新的構造函數 <code>SharedArrayBuffer</code> 以及擁有許多靜态方法的命名空間對象 <code>Atomic</code> 。

<code>Atomic</code> 對象類似于 <code>Math</code> 對象,擁有許多靜态方法,是以我們不能把它當做構造函數。<code>Atomic</code> 對象有如下常用的靜态方法:

add /sub - 為某個指定的value值在某個特定的位置增加或者減去某個值

and / or /xor - 進行位操作

load - 擷取特定位置的值

該部分的浏覽器相容情況如下(資訊來自 MDN ):

[譯] 是的,ES2017 (ES8)來了

使用 ES6 中規定的模版字元串,我們可以做如下事情:

[譯] 是的,ES2017 (ES8)來了

JavaScript 正處于高速發展中,時常會被更新。我們必須準備好接受、擁抱 JavaScript 的新特性。最後,上述這些特性被 TC39 委員會所确認以及被一些核心開發人員所實作。甚至許多新特性現在已經成為了 TypeScript、浏覽器以及一些文法糖的一部分,是以我們現在就可以嘗試使用它們,積極擁抱新特性。

[譯] 是的,ES2017 (ES8)來了

<b>原文釋出時間為:2017年7月13日</b>

<b>本文來自雲栖社群合作夥伴掘金,了解相關資訊可以關注掘金網站。</b>

繼續閱讀