IE 瀏覽器不支持 ES6 Array.from(new Set( )) SCRIPT438: 對象不支持「from」屬性

【轉】 解決老瀏覽器不支持ES6的方法

現象：

Array.from(new Set( ))

SCRIPT438: 對象不支持「from」屬性或方法

 

解決方法：

安裝babel

引入browser.min.js     browser-polyfill.min.js

<script src="~/browser.min.js"></script>

爲何ES6會有兼容性問題？

因爲廣大用戶使用的瀏覽器版本在發佈的時候也許早於ES6的定稿和發佈，而到了今天，咱們在編程中若是使用了ES6的新特性，瀏覽器若沒有更新版本，或者新版本中沒有對ES6的特性進行兼容，那麼瀏覽器確定沒法識別咱們的ES6代碼，比如瀏覽器根本看不懂我寫的let和const是什麼東西？只能報錯了。這就是瀏覽器對ES6的兼容性問題。

好消息

哪裏有災難，哪裏就有勇士和救兵，針對ES6的兼容性問題，不少團隊爲此開發出了多種語法解析轉換工具，把咱們寫的ES6語法轉換成ES5，至關於在ES6和瀏覽器之間作了一個翻譯官。比較通用的工具方案有babel，jsx，traceur，es6-shim等。

此外，瀏覽器自身也加快速度兼容ES6的新特性，其中對ES6新特性最友好的是Chrome和Firefox瀏覽器。

各大轉換工具、JavaScript解析引擎對ES6的支持程度狀況，能夠參查看這個地址：

http://kangax.github.io/compat-table/es6/

壞消息

即便瀏覽器對ES6新特性開始漸漸支持，可是這還須要很長一段時間，咱們不能百分百依賴瀏覽器自己對ES6的支持度來開發。

雖然出現了各類轉換工具，可是到目前爲止，尚未一款工具能百分百將ES6的新特性完美地轉換成ES5，由於在ES6新增的內容中，存在一些沒法在ES5中找到與之匹配的語法，因此不建議在生產環境中使用支持度較低的新特性，後續的教程章節中介紹的新特性前端君也會特地提醒它的兼容性。

學習熱情不減

可是，這並不影響咱們學習ES6的熱情，由於ES6是將來的標準，瀏覽器支持只是早晚的事。

本節介紹其中一個轉換工具的安裝和使用狀況，安裝使用以簡單爲主，主要是讓新手和剛接觸的同窗對轉換工具備感性的認知。再次代表，即便使用了轉換工具，咱們仍是不建議在生產環境大量地使用ES6的特性。

使用轉換工具babel

咱們選擇Babel做爲學習和講解的工具，以及最多人使用的windows做爲操做系統。

接下來的前端君建議你打開電腦，跟着教程一步步操做。（沒有也沒關係，先收藏此文）

步驟1：製做ES6文件

新建一個html文件，取名爲：ES6.html，加上含有ES6新特性的代碼，好比：

<script>
   const Name = '張三';//使用新增的關鍵字：const聲明常量
   alert(Name);
</script>

步驟2：測試const兼容性

咱們在chrome瀏覽器（版本不能過低）運行ES6.html，會正常運行，彈出「張三」。

 

接下來咱們運行在IE 9，會看到這樣的狀況：

 

IE 9瀏覽器會提示咱們第9行出現一個語法錯誤，至關於告訴咱們它看不懂const是什麼鬼，可是學過ES6入門系列第三節的咱們都知道const是ES6的新增關鍵字，用於聲明一個常量。這個時候咱們知道const在IE9瀏覽器出現了兼容性問題了。

 

下面咱們開始用Babel來兼容它。

咱們可使用npm來安裝babel，npm是隨同Nodejs一塊兒安裝的包管理工具，新版的nodejs已經繼承了npm，咱們只要安裝nodejs便可。對於nodejs的安裝，不在本節的學習範圍，我就不做展開說明了……….纔怪。（說好的簡單易懂，前端君怎麼會半途掉鏈子）

步驟3：安裝node

來，沒安裝過的node的同窗，咱們來一塊兒安裝：

node官網（下載安裝包.msi）：https://nodejs.org/

 

（nodejs官網首頁截圖）

咱們點擊v4.4.5LTS進行下載，下載後找到node-v4.4.5-x64.msi雙擊運行,點擊next（下一步）安裝便可。期間你能夠自定義選擇安裝的位置，默認是C:\ProgramFiles\。最後一步點擊 Finish（完成）按鈕退出安裝嚮導。

步驟4：檢測node是否安裝成功

安裝結束後，咱們檢測是否安裝成功：

點擊 「開始」-> 「運行」-> 輸入「cmd」-> 進入命令提示符窗口，輸入「node –version」來檢測當前node的版本。

 

出現：v4.4.5就表示安裝成功，由於咱們下載的就是v4.4.5LTS。

步驟5：用npm安裝babel

好了，node安裝好了，也就是它集成的npm包管理工具也安裝好了，接下來，咱們利用npm來安裝咱們最想要的babel。

一樣咱們啓動命令提示符窗口而且輸入：npm install babel-core@5，而後回車，這裏要稍等片刻：

 

看到上面的界面就是表示你安裝babel成功，你會在電腦盤中找到這樣的目錄：C:\Users\Administrator\node_modules\babel-core，打開後你會看到：

 

在這個目錄裏面咱們找到babel的瀏覽器版本browser.js(未壓縮版)和browser.min.js(壓縮版)。

步驟6：使用babel

而後咱們將這個文件使用在咱們的ES6.html中。

<script src="browser.min.js"></script>
<script type="text/babel">
   const Name = '張三';//使用新增的關鍵字：const聲明常量
   alert(Name);
</script>

咱們把browser.min.js引入（文件位置的路徑要確保正確）。而且設置第二個script標籤的type爲」text/babel」。

步驟7：讓const運行在IE9瀏覽器上

而後咱們再在IE9瀏覽器上運行一下：

 

這個時候IE9能正常運行咱們的ES6新特性了，也就是babel轉換起做用了，講const轉換成IE9能執行的代碼了。

這節內容操做教學的比較多，屬於很乾的乾貨，不少東西沒有展開講解，好比：node是什麼？命令提示符怎麼操做等問題，對於剛剛接觸編程的新手來講，若是看不懂或者不少不理解也不要緊，不會阻礙後面章節的學習，由於你可使用Chrome或者Firefox瀏覽器進行學習和練習，在這兩款瀏覽器上能夠執行大部分的ES6新特性，不須要使用相似babel的轉換工具。

這一節的講解只是做爲一個學習的入門案例，起到拋磚引玉的做用，讓新手們能對ES6的兼容問題和babel轉換工具備個感性認知，並無覆蓋全部兼容方案的介紹，之後的開發中咱們必定會發現更多關於ES6特性的坑，也會找到更多相對應的解決辦法。填上這些坑，就是進步的表現。

本節總結

總結：目前，瀏覽器和轉換工具並無百分百支持ES6的所有新特性，但並不影響你們對ES6的學習熱情，由於這是將來的行業標準，前端開發者必須掌握的技能；而今天介紹的babel就是目前對 ES6 的支持程度較高，使用普遍的ES6轉碼器。