ES8 新特性一覽

科技 08-14

前言

感覺這一兩年ES推進的速度很快，一茬一茬的特性，大家就適當的了解。今日早讀文章由@Jason Cheng翻譯分享。

正文從這開始～

ES8 新特性一覽

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

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

如果您想對 ES8 做一個深入、徹底的了解，您可以查閱Web 資源或者PDF 資源。其他的讀者，您可以直接查閱本文，因為本文將涵蓋 ES8 主要的新特性，並且會附上代碼示例。

字元串填充

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

str.padStart(targetLength[,padString])

str.padEnd(targetLength[,padString])

正如你所看到的，這倆函數的第一個參數（必輸）是 targetLength ，這個參數指的是設定這倆函數最後返回的字元串的長度。第二個參數 padString 是可選參數，代表你想要填充的內容，默認值是空格。具體代碼示例如下：

es8 .padStart(2);// es8

es8 .padStart(5);// es8

es8 .padStart(6, woof );// wooes8

es8 .padStart(14, wow );// wowwowwowwoes8

es8 .padStart(7, 0 );// 0000es8

es8 .padEnd(2);// es8

es8 .padEnd(5);// es8

es8 .padEnd(6, woof );// es8woo

es8 .padEnd(14, wow );// es8wowwowwowwo

es8 .padEnd(7, 6 );// es86666

目前瀏覽器的支持情況如下（信息來自 MDN ）：

values和entries函數

在 Object 中，ES8 也新增了兩個新的函數，分別是 Object.values 函數和 Object.entries 函數。Object.values 函數將會返回一個數組，該數組的內容是函數參數（一個對象）可遍歷屬性的屬性值。數組中得到的屬性值的順序與你在對參數對象使用 for in 語句時獲取到的屬性值的順序一致。函數聲明如下：

Object.values(obj)

參數 obj 就是源對象，它可以是一個對象或者一個數組（因為數組可以看作是數組下標為 key ，數組元素為 value 的特殊對象）。具體的代碼示例如下：

constobj={x: xxx ,y:1};

Object.values(obj);// [ xxx , 1]

constobj=[ e , s , 8 ];// same as { 0: e , 1: s , 2: 8 };

Object.values(obj);// [ e , s , 8 ]

// when we use numeric keys, the values returned in a numerical

// order according to the keys

constobj={10: xxx ,1: yyy ,3: zzz };

Object.values(obj);// [ yyy , zzz , xxx ]

Object.values( es8 );// [ e , s , 8 ]

目前瀏覽器對於 Object.values 函數的支持情況如下（信息來自 MDN ）：

介紹完 Object.values 函數，接下來繼續介紹 Object.entries 函數。 Object.entries 函數與 Object.values 函數類似，也是返回一個數組，只不過這個數組是一個以源對象（參數）的可枚舉屬性的鍵值對為數組 [key, value] 的 n 行 2 列的數組。它的返回順序與 Object.values 函數類似。它的函數聲明如下：

Object.entries(obj)

示例代碼如下：

constobj={x: xxx ,y:1};

Object.entries(obj);// [[ x , xxx ], [ y , 1]]

constobj=[ e , s , 8 ];

Object.entries(obj);// [[ 0 , e ], [ 1 , s ], [ 2 , 8 ]]

constobj={10: xxx ,1: yyy ,3: zzz };

Object.entries(obj);// [[ 1 , yyy ], [ 3 , zzz ], [ 10 : xxx ]]

Object.entries( es8 );// [[ 0 , e ], [ 1 , s ], [ 2 , 8 ]]

目前瀏覽器對於 Object.entries 函數的支持情況如下（信息來自 MDN ）：

getOwnPropertyDescriptors函數

Object 中還有一個新成員，那就是 Object.getOwnPropertyDescriptors 函數。該函數返回指定對象（參數）的所有自身屬性描述符。所謂自身屬性描述符就是在對象自身內定義，不是通過原型鏈繼承來的屬性。函數聲明如下：

Object.getOwnPropertyDescriptors(obj)

obj 參數即為源對象，該函數返回的每個描述符對象可能會有的 key 值分別是：configurable、enumerable、writable、get、set和value。示例代碼如下：

constobj={

getes7(){return777;},

getes8(){return888;}

};

Object.getOwnPropertyDescriptor(obj);

// {

// es7: {

// configurable: true,

// enumerable: true,

// get: function es7(){}, //the getter function

// set: undefined

// },

// es8: {

// configurable: true,

// enumerable: true,

// get: function es8(){}, //the getter function

// set: undefined

// }

描述符數據非常重要，尤其是在裝飾器上。該函數的瀏覽器支持情況如下（信息來自 MDN ）：

結尾逗號

此處結尾逗號指的是在函數參數列表中最後一個參數之後的逗號以及函數調用時最後一個參數之後的逗號。ES8 允許在函數定義或者函數調用時，最後一個參數之後存在一個結尾逗號而不報 SyntaxError 的錯誤。示例代碼如下：

函數聲明時

函數調用時

es8(10,20,30,);

ES8的這項新特性受啟發於對象或者數組中最後一項內容之後的逗號，如 [10, 20, 30,] 和 { x: 1, } 。

非同步函數

由 async 關鍵字定義的函數聲明定義了一個可以非同步執行的函數，它返回一個 AsyncFunction 類型的對象。非同步函數的內在運行機制和 Generator 函數非常類似，但是不能轉化為 Generator 函數。

ps: 不理解 Generator 函數的讀者可以參考阮一峰大師的ES6入門中關於Generator函數的講解

示例代碼如下：

functionfetchTextByPromise(){

returnnewPromise(resolve=>{

setTimeout(()=>{

resolve("es8");

},2000);

});

}

asyncfunctionsayHello(){

constexternalFetchedText=awaitfetchTextByPromise();

console.log(`Hello,${externalFetchedText}`);// Hello, es8

}

sayHello();

上述代碼中， sayHello 函數的調用將會導致在2秒之後列印 Hello, es8 。繼續來看一段代碼：

console.log(1);

sayHello();

console.log(2);

輸出將會變成：

1// immediately

2// immediately

Hello,es8// after 2 seconds

之所以會列印上述內容，那是因為非同步函數不會阻塞程序的繼續執行。

非同步函數的瀏覽器支持情況如下（信息來自 MDN ）：

共享內存與原子操作

當內存被共享時，多個線程可以並發讀、寫內存中相同的數據。原子操作可以確保那些被讀、寫的值都是可預期的，即新的事務是在舊的事務結束之後啟動的，舊的事務在結束之前並不會被中斷。這部分主要介紹了 ES8 中新的構造函數 SharedArrayBuffer 以及擁有許多靜態方法的命名空間對象 Atomic 。

Atomic 對象類似於 Math 對象，擁有許多靜態方法，所以我們不能把它當做構造函數。 Atomic 對象有如下常用的靜態方法：

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

and / or /xor - 進行位操作

load - 獲取特定位置的值

該部分的瀏覽器兼容情況如下（信息來自 MDN ）：

取消模版字元串限制（ ES9 ）

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

constesth=8;

helper`ES${esth}is `;

functionhelper(strs,...keys){

conststr1=strs[];// ES

conststr2=strs[1];// is

letadditionalPart= ;

if(keys[]==8){// 8

additionalPart= awesome ;

}

else{

additionalPart= good ;

}

return`${str1}${keys[]}${str2}${additionalPart}.`;

}

上述代碼的返回值將會是 ES 8 is awesome 。如果 esth 是 7 的話，那麼返回值將會是 ES 7 is good 。這樣做完全沒有問題，很酷！但是我們在使用模版字元串的時候，有一個限制，那就是不能使用類似於 u 或者 x 的子字元串， ES9 正在處理這個問題。詳情請查閱MDN或者TC39文檔。**模板字元串修正(非模板字元串)**的瀏覽器兼容情況如下（信息來自 MDN ）:

結語

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

前幾期還剛推送了ES6的新特性，【第1006期】ECMAScript 6 新特性

關於本文

譯者：@Jason Cheng

譯文：https://github.com/xitu/gold-miner/blob/master/TODO/es8-was-released-and-here-are-its-main-new-features.md（掘金翻譯計劃）

原文：https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66

作者：@Dor Moshe

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！