[譯] 是的，ES2017 （ES8）來了

• 原文地址：ES8 was Released and here are its Main New Features 🔥
• 原文做者：Dor Moshe
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Jason Cheng
• 校對者：

本文主要講解 ES8 ( ES2017 )新增的功能、特性

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 的特殊對象）。具體的代碼示例以下：

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['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
const obj = { 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)複製代碼

示例代碼以下：

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

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

const obj = { 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。示例代碼以下：

const obj = { 
  get es7() { return 777; },
  get es8() { return 888; }
};
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 的錯誤。示例代碼以下：

函數聲明時

function es8(var1, var2, var3,) {
  // ...
}複製代碼

函數調用時

es8(10, 20, 30,);複製代碼

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

---

異步函數

由 async 關鍵字定義的函數聲明定義了一個能夠異步執行的函數，它返回一個 AsyncFunction 類型的對象。異步函數的內在運行機制和 Generator 函數很是相似，可是不能轉化爲 Generator 函數。

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

示例代碼以下：

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}
async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  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複製代碼

之因此會打印上述內容，那是由於異步函數不會阻塞程序的繼續執行。

譯者注：

此處打個小廣告，若是有讀者對於 JavaScript 的異步機制還有不明白的地方，能夠參考本人的一篇博客javascript異步機制，裏面是本人關於異步機制的一點拙見,相信會對您有一點啓發。歡迎指正與交流！

異步函數的瀏覽器支持狀況以下（信息來自 MDN ）：

---

共享內存與原子操做

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

Atomic 對象相似於 Math 對象，擁有許多靜態方法，因此咱們不能把它當作構造函數。 Atomic 對象有以下經常使用的靜態方法：

• add /sub - 爲某個指定的value值在某個特定的位置增長或者減去某個值
• and / or /xor - 進行位操做
• load - 獲取特定位置的值

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

---

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

使用 ES6 中規定的模版字符串，咱們能夠作以下事情：

const esth = 8;
helper`ES ${esth} is `;
function helper(strs, ...keys) {
  const str1 = strs[0]; // ES
  const str2 = strs[1]; // is
  let additionalPart = '';
  if (keys[0] == 8) { // 8
    additionalPart = 'awesome';
  }
  else {
    additionalPart = 'good';
  }

  return `${str1} ${keys[0]} ${str2} ${additionalPart}.`;
}複製代碼

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

---

結語

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

最後，你能夠在Medium或者Twitter上來關注我，進而查看更多有關 JavaScript 和 Angular 的文章。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。