站長(zhǎng)資訊網(wǎng)
不是；ES6提供了許多新特性，但并不是所有的瀏覽器都能夠完美支持，例如IE7~11版本基本不支持ES6，而Edge12-14僅支持部分ES6新特性；對(duì)ES6新特性最友好的是Chrome和Firefox瀏覽器，Chrome51版起便可以支持97%的ES6新特性，F(xiàn)irefox53版起便可以支持97%的ES6新特性。
php入門到就業(yè)線上直播課：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
ES6 提供了許多新特性，但并不是所有的瀏覽器都能夠完美支持。好在目前各大瀏覽器自身也加快速度兼容 ES6 的新特性，其中對(duì) ES6 新特性最友好的是 Chrome 和 Firefox 瀏覽器。
ES6語法對(duì)瀏覽器的兼容介紹
| 瀏覽器 | 不支持的版本 | 部分支持的版本 | 支持的版本 |
|---|---|---|---|
| IE | 6-10 | 11 | |
| Edge | 12-14 | 15-18、79-87 | |
| Firefox | 2-5 | 6-53 | 54-86 |
| Chrome | 4-20 | 21-50 | 51-90 |
| Safari | 3.1-7 | 7.1-9.1 | 10-13.1、14、TP |
| Opera | 10-12.1 | 15-37 | 38-72 |
| iOS Safari | 3.2-6.1 | 7-9.3 | 10-13.7、14.2 |
| Opera Mini | all | ||
| Android Browser | 2.1-4.3 | 4.4-4.4.4 | 81 |
| Opera Mobile | 12-12.1 | 59 | |
| Chrome for Android | 87 | ||
| Firefox for Android | 83 | ||
| UC Browser for Android | 12.12 | ||
| Samsung Internet | 4 | 5-13.0 | |
| QQ Browser | 10.4 | ||
| Baidu Browser | 7.12 | ||
| KaiOS Browser | 2.5 |
詳細(xì)各個(gè)瀏覽器對(duì)ES6的支持性，可查看https://caniuse.com/?search=es6
想要知道自己的瀏覽器是否支持ES6，可查看http://ruanyf.github.io/es-checker/index.cn.html
桌面端瀏覽器對(duì)ES2015的支持情況
-
Chrome：51 版起便可以支持 97% 的 ES6 新特性。
-
Firefox：53 版起便可以支持 97% 的 ES6 新特性。
-
Safari：10 版起便可以支持 99% 的 ES6 新特性。
-
IE：Edge 15可以支持 96% 的 ES6 新特性。
-
Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）
可以看到IE11又拖了后腿，對(duì)ES6徹底放棄，由Edge 來支撐它的未來。
IE11下有效兼容ES6
那么如何讓純ES6腳本在IE11下運(yùn)行呢，還是babel，提供了有效的解決辦法
引入兩個(gè)腳本：
https://cdn.bootcss.com/babel-core/5.8.35/browser.min.js
該腳本轉(zhuǎn)換的是es6語法層面的語句
https://cdn.bootcss.com/babel-core/5.8.35/browser-polyfill.min.js
該腳本轉(zhuǎn)換了新語法的API，比如Set Map Promise等的方法
標(biāo)記腳本塊的 type = "text/babel"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IE11 With ES6</title> <script src="./browser-polyfill.min.js"></script> <script src="./browser.min.js"></script> <script type="text/babel"> const list = ['one', 'two', 'three']; list.forEach((item, index) => { alert(item + (index + 1)); }); let promise = new Promise(function (resolve, reject) { alert('Promise'); resolve(); }); promise.then(function () { alert('resolved.'); }); const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); alert(items.size) const map = new Map(); const k1 = ['a']; const k2 = ['a']; map.set(k1, 111).set(k2, 222); alert(map.get(k2)) </script> </head> <body> </body> </html>
那么這里有兩個(gè)困惑：
第一：<script type="text/babel"> 和我們平時(shí)用的<script type="text/javascript">有什么區(qū)別。
第二：polyfill到底干了什么
我們分別來說明下，我們來看一個(gè)未壓縮的代碼：https://cdn.bootcss.com/babel-core/5.8.38/browser.js
發(fā)現(xiàn)如下幾個(gè)代碼片段：
//頁(yè)面加載后，執(zhí)行runScripts方法 if (global.addEventListener) { global.addEventListener("DOMContentLoaded", runScripts, false); } else if (global.attachEvent) { global.attachEvent("onload", runScripts); }
var runScripts = function runScripts() { var scripts = []; //識(shí)別類型 var types = ["text/ecmascript-6", "text/6to5", "text/babel", "module"]; var index = 0; /** * Transform and execute script. Ensures correct load order. */ var exec = function exec() { var param = scripts[index]; if (param instanceof Array) { transform.run.apply(transform, param); index++; exec(); } }; /** * Load, transform, and execute all scripts. */ var run = function run(script, i) { var opts = {}; if (script.src) { transform.load(script.src, function (param) { scripts[i] = param; exec(); }, opts, true); } else { opts.filename = "embedded"; scripts[i] = [script.innerHTML, opts]; } }; // Collect scripts with Babel `types`. var _scripts = global.document.getElementsByTagName("script"); //按照類別加載 for (var i = 0; i < _scripts.length; ++i) { var _script = _scripts[i]; if (types.indexOf(_script.type) >= 0) scripts.push(_script); } //執(zhí)行 for (i in scripts) { run(scripts[i], i); } exec(); };
我想我們關(guān)注的text/babel就在這里：var types = ["text/ecmascript-6", "text/6to5", "text/babel", "module"];
獲取頁(yè)面上標(biāo)記為以上三項(xiàng)的腳步，然后用transform庫(kù)進(jìn)行加載和翻譯成ES5進(jìn)行執(zhí)行。
那么polyfill又干了什么呢，繼續(xù)閱讀代碼https://cdn.bootcss.com/babel-core/5.8.38/browser-polyfill.js
同樣定位到一段代碼：
$export($export.P, 'Array', { // 22.1.3.10 / 15.4.4.18 Array.prototype.forEach(callbackfn [, thisArg]) forEach: $.each = $.each || methodize(createArrayMethod(0)), // 22.1.3.15 / 15.4.4.19 Array.prototype.map(callbackfn [, thisArg]) map: methodize(createArrayMethod(1)), // 22.1.3.7 / 15.4.4.20 Array.prototype.filter(callbackfn [, thisArg]) filter: methodize(createArrayMethod(2)), // 22.1.3.23 / 15.4.4.17 Array.prototype.some(callbackfn [, thisArg]) some: methodize(createArrayMethod(3)), // 22.1.3.5 / 15.4.4.16 Array.prototype.every(callbackfn [, thisArg]) every: methodize(createArrayMethod(4)), // 22.1.3.18 / 15.4.4.21 Array.prototype.reduce(callbackfn [, initialValue]) reduce: createArrayReduce(false), // 22.1.3.19 / 15.4.4.22 Array.prototype.reduceRight(callbackfn [, initialValue]) reduceRight: createArrayReduce(true), // 22.1.3.11 / 15.4.4.14 Array.prototype.indexOf(searchElement [, fromIndex]) indexOf: methodize(arrayIndexOf), // 22.1.3.14 / 15.4.4.15 Array.prototype.lastIndexOf(searchElement [, fromIndex]) lastIndexOf: function(el, fromIndex /* = @[*-1] */){ var O = toIObject(this) , length = toLength(O.length) , index = length - 1; if(arguments.length > 1)index = Math.min(index, toInteger(fromIndex)); if(index < 0)index = toLength(length + index); for(;index >= 0; index--)if(index in O)if(O[index] === el)return index; return -1; } }); var createArrayReduce = function(isRight){ return function(callbackfn, memo){ aFunction(callbackfn); var O = IObject(this) , length = toLength(O.length) , index = isRight ? length - 1 : 0 , i = isRight ? -1 : 1; if(arguments.length < 2)for(;;){ if(index in O){ memo = O[index]; index += i; break; } index += i; if(isRight ? index < 0 : length <= index){ throw TypeError('Reduce of empty array with no initial value'); } } for(;isRight ? index >= 0 : length > index; index += i)if(index in O){ memo = callbackfn(memo, O[index], index, this); } return memo; }; };
可以發(fā)現(xiàn)ployfill給Arrary添加了很多新方法，比如createArrayReduce就是實(shí)現(xiàn)reduce用的。
注意
引入以上兩個(gè)文件基本就解決了瀏覽器對(duì)ES6的大部分支持問題。
不過再次強(qiáng)調(diào)：即使使用了轉(zhuǎn)換工具，還是不建議在生產(chǎn)環(huán)境大量地使用瀏覽器對(duì)ES6支持度較低的新特性的特性。畢竟這是在線轉(zhuǎn)換后才執(zhí)行的，效率比較低。而且隨著瀏覽器對(duì)ES6的支持的變化，這些轉(zhuǎn)換腳本也需要經(jīng)常更新，勢(shì)必對(duì)后期的維護(hù)帶來影響。
【
