ES2017 的主要功能有什麼?

hi_chegde發表於2018-04-11

ES2017 的主要功能有什麼以及 ES2018 會帶來什麼？分兩部分去探索最新最好的 ECMAScript 的特性。第一部分探索主要特性如非同步函式、共享記憶體以及 atomics ，而第二部分探索其餘特性。

看看 ECMA International, Technical Committee 39 ，事實證明 ES6 中的6並不是釋出所需的年數。由於 ES6/ES2015 花了很長時間釋出(6年)，委員會決定每年去釋出一點。我認為這種勢頭會讓事情發生變化，並改善 JavaScript 。ES2017 會帶來什麼， ES2018 的列表呢？

你可以瞭解 TC39 議程進展從2ality通過Axel Rauschmayer:The TC39 Process for ECMAScript Features

ES2017

一月的 TC39 會議，該小組就 ECMAScript 提案進行了解決，該提案將被視為 ES2017 的功能（也被稱為 ES8，這應該是為了避免混淆）。列表包括：

主要特性

次要特性

在該文章中，第一部分介紹上述所列的主要特性。第二篇文章介紹次要特性。

Async Functions

Async Functions on GitHub (Proposed by Brian Terlson)

在 ES2015 ，我們使用 promise 幫助我們避免回撥地獄。

async/await 語法受 TJ Holowaychuk 的 Co 軟體包啟發，讀起來像同步程式碼。總結， async/await 關鍵字 及 try/catch 塊使得函式非同步執行。它們像 generateors 一樣工作，但沒有轉換為 Generateor 函式。這是這樣的：

// Old Promise Town  
function fetchThePuppies(puppy) {
  return fetch(puppy)  
  .then(puppyInfo => puppyInfo.text())
  .then(text => {
    return JSON.parse(text)
  })  
  .catch(err =>
    console.log(`Error: ${err.message}`)
  )
}

// New Async/Await City  
async function fetchThePuppies(puppy) {
  try {
    let puppyInfo =  await  fetch(puppy)
    let text =  await puppyInfo.text()
    return  JSON.parse(text)
  }
  catch (err) {
    console.log(`Error: ${err.message}`)
  }
}
複製程式碼

這並不意味著你應該把所有 promise 程式碼替換成 async/await 。就像你不會把每一個函式都用箭頭函式(希望)，只在最合適的地方用這個語法。我不會講太多細節因為有成堆文章已經覆蓋了 async/await 。去看一下。（上面前一個句子給了一些博文）。在即將到來的一年中，我們將看到人們如何使他們的程式碼更具有可讀性和更高效的使用 async/await 。

共享記憶體及 Atomics

Shared Memory and Atomics on GitHub (Proposed by Lars T. Hansen)

這個 ECMAScript 提案引入了 SharedArrayBuffer 和一個名稱空間物件 Atomics 以及輔助函式至 ES2017 。

我們使用 JavaScript 在瀏覽器中使用更多操作，這些操作依賴於 JIT 即時編譯器和快速 CPU 。不幸的是，正如 Lars T. Hansen 在他的一篇很棒的2016年三月的文章A Taste of JavaScript's New Parallel Primitives中說。

JS JIT 現在效能提升緩慢，並且 CPU 效能的改進大多停滯不前。 現在所有的消費級裝置（從桌上型電腦系統到智慧手機）都擁有多個 CPU （真正的 CPU 核心），而不是更快的 CPU ，除了低端以外，它們通常有兩個以上。 一位想要為程式提供更高效能的程式設計師必須開始並行使用多個核心。 這對於所有用多執行緒程式語言（ Java ， Swift ， C＃ 和 C ++ ）編寫的“本機”應用程式來說都不是問題，但是對於多 CPU 上執行非常有限的 JS 是個問題（ web workers, 只有緩慢的訊息傳遞和少數方式去避免資料拷貝）。

SharedArrayBuffer

該提案為我們提供多核計算的構建基礎，去研究不同方式去實現 JS 高階並行架構。這些構建基礎是什麼？ SharedArrayBuffer 瞭解一下。MDN有簡潔的定義，我貼在這裡：

SharedArrayBuffer 物件作為一個通用的、長度固定的raw二進位制資料快取塊，跟 ArrayBuffer 物件相似，但是他們可以在共享記憶體中建立檢視。不像 ArrayBuffer ， SharedArrayBuffer 不能分離。

我不知道你會不會跟我第一次讀到的時候感受一樣 “？？？”。

基本上，我們能夠執行並行任務的首要方式之一是使用 web workers 。由於 workers 執行在它自己的全域性環境中且無法分享，除非 workers 間進行交流或者跟主執行緒交流。更好的是， SharedArrayBuffer 物件允許你去分享位元組資料在多個 wrokers 和主執行緒中。再者，與前身 ArrayBuffer 不同， SharedArrayBuffer 可以同時被多方（例如 web workers 或者 web 頁面主程式）引用。你可以使用 postMessage 將 SharedArrayBuffer 從其中一方轉移到另一方。把它放在一起，使用 SharedArrayBuffer 在多個工作者和主執行緒之間傳輸資料，以便可以一次執行多個任務，這些任務在 JavaScript 中是並行的。

SharedArrayBuffer 新訊息

重要！注意 SharedArrayBuffer 的暫時擱置。 如果你最近一直關注這個新聞，你可能會了解到處理器晶片安全設計缺陷導致兩個漏洞： Meltdown 和 Spectre 。 閱讀它，知道瀏覽器禁用 SharedArrayBuffer ，直到解決此問題。

Atomics

並行的下一站: Atomics ，一個有兩個方法的全域性變數。首先，介紹一下 Atomics 方法要解決的問題：在各方（如 web workers 或 Web頁面的主程式）共享 SharedArrayBuffer 時，各方可以隨時讀取和寫入其記憶體。那麼，你如何保持一致性及訪問順序化，確保各方知道要等待其他方完成他們的資料寫入？

Atomics 有 wake 和 load 方法。各方將會“休眠”在等待佇列中，等待其他方完成寫入資料，所以 Atomics.wake 是一個讓各方“醒來”的方法。當你需要讀資料的時候，你用 Atomics.load 去從某個地點裝載資料，這個位置需要輸入兩個引數，TypedArray，一類陣列機制去訪問raw二進位制資料（即 SharedArrayBuffer），和一個下標去尋找在 TypedArray 的位置。除了我們剛才介紹的內容之外，還有更多的內容，但這是它的要點。

目前， Atomics 只有這兩種方法。 最後， Hansen （我們這個提案的作者和並行事物的解釋者）說，應該有更多的方法，比如 store 和 compareExchange 來真正實現同步。相對而言，我們正處於 JavaScript 並行的開始階段，這個提議為我們提供了實現這些目標的基石。

雖然這是一個值得思考的問題，但這仍然是一個高度概括。此更新可能在下一年不會被大多數開發人員使用，但會有助於推進 JavaScript 讓每個人受益。 所以，感謝你的閱讀，並瀏覽這些奇妙資源去深入瞭解！

更多內容:

本文翻譯自原文 -ECMAScript Goodies I: Check out the ES2017 Major Features。不定期更新技術博文歡迎star。由於本人水平有限，錯誤之處在所難免，敬請指正！轉載請註明出處，保留原文連結以及作者資訊。

相關文章