JavaScript ES2017 中值得期待的功能

知識 07-07

由於ES6 / ES2015花了大約6年的時間，才得以發布，因此負責JavaScript語言規範的技術委員會TC39，決定按年度周期來發布ES。這種變化允許ES語言規範，以更小和更迭代的版本形式進行發布。這樣可以保證：如果特徵語言規格在今年截止日期之前沒有完成，那麼它可以包含在明年的發布版本中。這種較小但功能強大的年度發布周期形式，允許語言規範持續增長。

ES2017介紹

對很大一部分JavaScript開發者來說，ES2017可以讓他們感受到新的、閃亮的技術前沿工具。無論是完全接受這項新技術，還是簡單地只使用其中測試工具的功能，我們都想知道ES2017中到底有什麼。

如果你熱衷於了解這個令人興奮的社區提供的所有新技術，下面是ES2017所包含的技術細節。

主要特點

1、非同步函數

TJ Holowaychuk是JavaScript社區的一個巨大貢獻者。TJ曾在Express, Koa, Rework, 和Co這樣的項目中工作過，他的代碼直接或間接地成為這些開發項目中的重要組成部分。

他對Co包做出的貢獻，對最近轉移到Stage 4 的Async Await功能規格產生了巨大的影響。Co 是一個利用Promises和Generator函數允許以更加同步的方式來讀取非同步JavaScript代碼語法的庫。

用Promises處理Async函數的一種普遍流程如下所示：

function fetchData(url) {

return fetch(url)

.then(request => request.text())

.then(text => {

return JSON.parse(text);

})

.catch(err => {

console.log(`Error: ${err.stack}`);

});

}

使用ES2017中的新增async和await關鍵字，我們可以利用全新的、與Co高度相似的語法來實現完全同步讀取。我們可以使用try / catch blocks和新的關鍵字來為特定功能分配非同步行為。在內部，Async功能與生成器的功能相同，但是卻不能轉換為Generator Functions。就像這樣：

async function fetchData(url) {

try {

let request = await fetch(url);

let text = await request.text();

return JSON.parse(text);

}

catch (err) {

console.log(`Error: ${err.stack}`);

}

可以使用以下的方式編寫ES2017中的Async函數：

非同步函數聲明

async function fooBar( ) { }

非同步函數表達式

const fooBar = async function ( ) { };

非同步方法定義

let obj = { async fooBar( ) { } }

非同步箭頭函數

const fooBar = async ( ) => { };

2、共享內存和Atomics

Lars Hansen提出了ES2017中共享內存和Atomics的建議，截至2017年2月，它已在第4階段中被批准，並包含到規範中。

此功能引入了一個新的低級別Atomics命名空間對象和一個SharedArrayBuffer構造函數，來作為更高級別並發抽象的原始構建塊。這使開發人員能夠共享多個service worker和核心線程之間的SharedArrayBuffer對象的數據。這種引入帶來了巨大的益處，因為可以更輕鬆地在worker之間共享數據，從而可以改善worker之間的協調。

次要功能

1、功能參數列表和調用中的結尾逗號

該函數結尾逗號的建議是一個純粹的語法更新的規範。在此規範更改之前，不允許在最後一個函數參數後面加上逗號，如下所示：

const trailCommaFn = function(

param1,

param2,

param3,

param4) { // No comma allowed here!

// do something in function body

}

ES2017帶來了結尾逗號：

const trailCommaFn = function(

param1,

param2,

param3,

param4, // Comma allowed here!

) {

// do something in function body

}

這種語法更新使得函數中的逗號與規範的其餘部分更加一致。在數組和對象文字中使用後綴逗號已經很普遍，現在我們可以使用相同的行為來進行函數列表和調用。

// Array

const arr = [

3, // <--- Ok

];

// Object Literal

const obj = {

x: "foo",

y: "bar",

z: "baz", // <--- Ok

}

另外，這個規格更改是git友好的，因為開發人員不再需要編輯2行代碼，以便為功能列表或調用添加1個參數。即使在最後一個參數之後，現在也可以使用逗號。

2、Object.values / Object.entries

Jordan Harband提出的Object.entries引入了一個entry概念。對象是鍵值對的數據結構，每個鍵值對都是entry。Object.entries(x)強制轉換x為對象，並以數組的方式返回其可枚舉的自定義字元串：

>> Object.entries({ foo: 1, bar: 2 })

[ [ "foo", 1 ], [ "bar", 2 ] ]

與Object.entries非常相似，Object.values返回一個數組，其值為可枚舉的字元串鍵值屬性：

>> Object.values({ foo: 1, bar: 2 })

[ 1, 2 ]

兩種方法的簽名Object.entries( )和Object.values( )如下：

Object.entries（value：any）：Array <[string，any]>

Object.values（value：any）：Array

3、字元串填充

引入了String Padding規範功能，為JavaScript的一些本地方法提供了處理字元串功能。它提供了padStart和padEnd以及trimStart和trimEnd方法，從而使開發人員更好地控制字元串原語。

>> console.log("testing".padStart(12).length)

" testing" is 12

>> console.log("testing".padStart(12, "_"))

"_____testing" is 12

4、Object.getOwnPropertyDescriptors

ECMAScript中沒有單個方法來簡化兩個對象之間的正確拷貝。之前，功能編程和不可變對象是複雜應用程序的重要組成部分，每個框架或庫都在實現自己的樣板，以便在合成對象或原型之間，能夠正確複製屬性。

Object.getOwnPropertyDescriptors( )是一個複數函數Object.getOwnPropertyDescriptor( )旨在簡化JavaScript中複製對象的過程。

Object.defineProperties( )這個新的規範功能的引入，允許decorators可以輕鬆地從另一個類或混合中提取出所有的描述符，並將它們分配給一個新的對象。

這個提案的部分原因，也是因為使用Object.assign( )方法不夠理想。Object.assign( )以吞噬行為的方式複製對象- 它直接訪問屬性和符號而不是其描述符。當涉及組合和處理複雜對象和類的原型時，這可能會成為一個更為危險的問題。

通過這個規範更新，開發人員不再需要依賴Object.assign( )來複制對象，而是利用一個真正的淺層拷貝的創建：

// Given an object `obj`

>> Object.create(

Object.getPrototypeOf(obj),

Object.getOwnPropertyDescriptors(obj)

);

現在使用ES2017功能

如果你渴望測試這些ES2017的功能，尤其是async和await，可以通過Babel"s Docs on ES2017 Preset來獲取，它將所有ES2017功能編譯成了ES2016代碼。此外，你還可以使用Babel的最新預設，它允許在代碼庫中編譯所有ES2015，ES2016和最終ES2017功能。