ES10難嗎？你只須要10分鐘

寫在前面的話

2019年6月4日，ES10正式draft已對外發布了。瀏覽器因版本的不一樣對Javascript標準會有兼容性問題，JavaScript的新的方法都不能使用。等到你能大批量使用的時候，版本早就迭代更多的不少新方法新屬性了。那麼如何保持隊形，不掉隊，能在stag3 or stag 4階段的時候就推動新方法在前端應用呢？ 不用擔憂，筆者已替大家整理踩好坑，花個10分鐘來看一下，你就能夠在前端玩轉ES10了！！

JS標準的制定–TC39和ECMA

Every year, a new version of ECMAScript is released with the proposals which are officially ready. This means, that the proposals which have been accepted and reached stage 4 by the TC39 committee would be included in the specification of that year (assuming it hasn’t been published), and the others - are postponed to the next year.

簡單來講，每年，官方就會發布一次新的ECMAScript（如下簡稱ES）規範提案。也就是說，那些被TC39採納並經過Stage 4的提案將會出如今當年正式發佈的ES規範中，處於其餘Stage的提案可能就會被廢棄或者推遲到下一年了。

TC39是什麼？

TC39是一個推進Javascript發展的委員會，由各個主流瀏覽器廠商的表明構成。從制定標準到落地是一個漫長的過程，而TC39就是制定ES標準、標準生成的流程，並實現。

TC39制定標準的流程是什麼？

TC39的提案流程：tc39.es/process-doc…       

                                         The stages of TC39 process

如何追蹤最新標準的提案進度？

查看最新提案流程進度的github地址: github.com/tc39/propos…

經過Stage 4，且被包括在ES10的提案

總覽

Index	Proposals	Expected Published Year
1	Optional catch binding	2019
2	JSON superset	2019
3	Symbol.prototype.description	2019
4	Function.prototype.toString revision	2019
5	Object.fromEntries	2019
6	Well-formed JSON.stringify	2019
7	String.prototype.{trimStart,trimEnd}	2019
8	Array.prototype.{flat,flatMap}	2019

詳細解說

1. Optional catch binding

ES10以前，try{}catch語法中會強制默認綁定異常變量，ES10提案中，可省略掉此變量。

2. JSON superset

ES10以前，U+2028(行分隔符)和U+2029(段分隔符)都會致使ECMA字符串解析的終止，致使使用時會帶來SyntaxError異常。ES10提案中，ECMA可支持識別了。

3.Symbol.prototype.description

訪問Symbol描述，ES10以前，惟一方法是將符號轉換成字符串，ES10提案中提供了getter Symbol.prototype.description來直接訪問"Symbol description"： 

MDN上的瀏覽器兼容信息：

4.Function.prototype.toStringrevision  如今返回更精確，包括空格、註釋

5.Object.fromEntries

Object.fromEntries() 函數傳入一個鍵值對的列表，並返回一個帶有這些鍵值對的新對象。是Object​.entries()的反轉。

MDN上的瀏覽器兼容信息：

6.Well-formed JSON.stringify

若是輸入 Unicode 格式可是超出範圍的字符，原先會直接返回格式錯誤的字符串，ES10會輸出轉義序列，並以UTF-8表示：

7.String.prototype.{trimStart,trimEnd}

trimStart 去除字符串的開頭的空白部分， trimEnd 去除字符串的尾部的空白部分：

MDN上的瀏覽器兼容信息：

8.Array.prototype.{flat,flatMap}

flat() 方法會按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回。

flatMap() 方法首先使用映射函數映射每一個元素，而後將結果壓縮成一個新數組。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap 一般在合併成一種方法的效率稍微高一些。

MDN上的瀏覽器兼容信息：

現階段，各大工具對ES10的支持性

提案經過，距離發佈乃至市場上的各大工具支持都還有一段很長的時間要走。。。（不少瀏覽器的高版本已經支持了，可參考上節的詳細解說裏的瀏覽器兼容性）

Node.js

不一樣版本對ES2015, ES2016, ES2017, ES2018, ES2019支持程度： node.green/

對於 Object.fromEntries，string trimming, Array.prototype.{flat, flatMap}，node.js V12.1.0及以上是100%支持。

Babel

Babel，是目前業內比較優秀的ES 語法轉換器。從6開始建議使用 babel-preset-env 這個能根據環境進行自動配置的預設。到了 babel7（2019-03-19發佈的最新版本是v7.4.0），咱們就能夠徹底告別這幾個歷史預設了: preset-es2015/es2016/es2017/latest，子模塊都遷移到了@babel下，如這裏的babel-preset-env 變成 @babel/preset-env。 @babel/preset-env目前最大支持是es2017的轉化，明年預計發佈es2018。

如今如何在前端兼容使用ES10呢？

Babel

這裏不得不提到的一個概念是babel-polyfill。

Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。

舉例來講，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。若是想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。

在Babel7之後，因爲修改了命名空間爲@babel, 因此須要引入的是@babel/polyfill，Babel 6及如下仍是使用babel-polyfill便可(由於babel-polyfill其實是包含了regenerator runtime and core-js的模塊，混亂使用會形成polyfill會找不到core-js模塊的位置)

具體修復步驟參考以下：

Step 1: 執行 npm install @babel/polyfill --save (因爲須要運行在你全部source code以前，因此須要安裝在dependency而不是devDependency)

Step 2: 若是你是用webpack構建的前端項目，只需在webpack.config.js的entry添加 ‘@babel/polyfill’

Note: @babel/polyfill 默認只會包含 Stage 4的提案部分，若是你須要其餘stage的提案(或者當前版本的polyfill還沒同步stage4的全部最新提案)，須要額外引入 core-js。

Demo參考連接：github.com/JeanZhao/ES…

PS: 感興趣的同窗能夠移步這裏查看怎麼升級Babel7: babeljs.io/docs/en/v7-…

lodash

若是你不想升級babel或引入額外的babel庫件，不妨試試lodash。對於array、number、objects、string等等，除了babel,還有一種工具也能夠經過下降它們的使用難度讓 JavaScript 變得更簡單，從而達到解決ES10裏的兼容問題。

如 lodash 提供了_flatten()來處理ES10裏stag-4的flat。一樣能夠解決這個問題。

具體修復步驟參考以下：

Step 1: 執行 npm install lodash --save

Step 2: 在使用的地方 import _ from 'lodash'; 而後就可按照如Demo裏使用的lodash是4.17.11版本，官網使用教程 來查看。

Demo參考連接：github.com/JeanZhao/ES…

簡易修改

若是你的項目很是原始(可能歷史比較悠久，項目比較龐大)，沒有使用babel, lodash, 或者線上環境比較嚴格，也不容許你更新以上的任何第三方庫件。這裏還有一種解救方案。

讀源碼！讀源碼！讀源碼！

重要的事情說三遍！

好比flat, 本質上來講，就是遞歸加數組拼接（reduce+concat）,你能夠根據你的需求來自定義 flatten函數的邏輯：

好了，以上就是此次的分享了，歡迎你們批評指正！謝謝~