现在浏览器都支持es6吗

不是；ES6提供了许多新特性，但并不是所有的浏览器都能够完美支持，例如IE7~11版本基本不支持ES6，而Edge12-14仅支持部分ES6新特性；对ES6新特性最友好的是Chrome和Firefox浏览器，Chrome51版起便可以支持97%的ES6新特性，Firefox53版起便可以支持97%的ES6新特性。

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

ES6 提供了许多新特性，但并不是所有的浏览器都能够完美支持。好在目前各大浏览器自身也加快速度兼容 ES6 的新特性，其中对 ES6 新特性最友好的是 Chrome 和 Firefox 浏览器。

ES6语法对浏览器的兼容介绍

IE6-1011
Edge
12-1415-18、79-87Firefox2-56-5354-86Chrome4-2021-5051-90Safari3.1-77.1-9.110-13.1、14、TPOpera10-12.115-3738-72iOS Safari3.2-6.17-9.310-13.7、14.2Opera Miniall

Android Browser2.1-4.34.4-4.4.481Opera Mobile12-12.1
59Chrome for Android

87Firefox for Android

83UC Browser for Android

12.12Samsung Internet
45-13.0QQ Browser

10.4Baidu Browser
7.12
KaiOS Browser
2.5

详细各个浏览器对ES6的支持性，可查看https://caniuse.com/?search=es6

想要知道自己的浏览器是否支持ES6，可查看http://ruanyf.github.io/es-checker/index.cn.html

桌面端浏览器对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又拖了后腿，对ES6彻底放弃，由Edge 来支撑它的未来。

IE11下有效兼容ES6

那么如何让纯ES6脚本在IE11下运行呢，还是babel，提供了有效的解决办法

引入两个脚本：

https://cdn.bootcss.com/babel-core/5.8.35/browser.min.js

该脚本转换的是es6语法层面的语句

https://cdn.bootcss.com/babel-core/5.8.35/browser-polyfill.min.js

该脚本转换了新语法的API，比如Set Map Promise等的方法

标记脚本块的 type = “text/babel”

nbsp;html>                                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))    

登录后复制

那么这里有两个困惑：

第一：

第二：polyfill到底干了什么

我们分别来说明下，我们来看一个未压缩的代码：https://cdn.bootcss.com/babel-core/5.8.38/browser.js
发现如下几个代码片段：

//页面加载后，执行runScripts方法if (global.addEventListener) {  global.addEventListener("DOMContentLoaded", runScripts, false);} else if (global.attachEvent) {  global.attachEvent("onload", runScripts);}

登录后复制

var runScripts = function runScripts() {  var scripts = [];  //识别类型  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 = 0) scripts.push(_script);  }  //执行  for (i in scripts) {    run(scripts[i], i);  }  exec();};

登录后复制

我想我们关注的text/babel就在这里：var types = [“text/ecmascript-6”, “text/6to5”, “text/babel”, “module”];

获取页面上标记为以上三项的脚步，然后用transform库进行加载和翻译成ES5进行执行。

那么polyfill又干了什么呢，继续阅读代码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--)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 = 0 : length > index; index += i)if(index in O){      memo = callbackfn(memo, O[index], index, this);    }    return memo;  };};

登录后复制

可以发现ployfill给Arrary添加了很多新方法，比如createArrayReduce就是实现reduce用的。

注意

引入以上两个文件基本就解决了浏览器对ES6的大部分支持问题。

不过再次强调：即使使用了转换工具，还是不建议在生产环境大量地使用浏览器对ES6支持度较低的新特性的特性。毕竟这是在线转换后才执行的，效率比较低。而且随着浏览器对ES6的支持的变化，这些转换脚本也需要经常更新，势必对后期的维护带来影响。

【相关推荐：javascript视频教程、javascript视频教程】

以上就是现在浏览器都支持es6吗的详细内容，更多请关注【创想鸟】其它相关文章！