現在瀏覽器都支援es6嗎-常見問題-PHP中文網

現在瀏覽器都支援es6嗎

青灯夜游

發布： 2022-10-20 14:20:20

原創

4984 人瀏覽過

不是；ES6提供了許多新特性，但並不是所有的瀏覽器都能夠完美支持，例如IE7~11版本基本上不支援ES6，而Edge12-14僅支援部分ES6新特性；對ES6新功能最友善的是Chrome和Firefox瀏覽器，Chrome51版起便可支援97%的ES6新特性，Firefox53版起便可支援97%的ES6新特性。

現在瀏覽器都支援es6嗎

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

ES6 提供了許多新特性，但並不是所有的瀏覽器都能夠完美支援。還好目前各大瀏覽器本身也加快速度相容 ES6 的新特性，其中對 ES6 新功能最友善的是 Chrome 和 Firefox 瀏覽器。

ES6語法對瀏覽器的相容介紹

##11#12-1415-18 、79-87Firefox2-56-5354-86#Chrome4-2021-5051-90Safari3.1-77.1-9.110-13.1、14、TPOpera10-12.1 15-3738-723.2-6.17-9.310-13.7、14.2all2.1-4.34.4-4.4 .48112-12.159Chrome for Android87Firefox for Android#83UC Browser for Android 12.12Samsung Internet45-13.0QQ Browser10.4Baidu Browser7.12KaiOS Browser

#瀏覽器	不支援的版本	部分支援的版本	支援的版本
IE	6-10
#Edge




#iOS Safari
#Opera Mini
#Android Browser
Opera Mobile

#########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"

<!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 = [&#39;one&#39;, &#39;two&#39;, &#39;three&#39;];
        list.forEach((item, index) => {
            alert(item + (index + 1));
        });


        let promise = new Promise(function (resolve, reject) {
            alert(&#39;Promise&#39;);
            resolve();
        });

        promise.then(function () {
            alert(&#39;resolved.&#39;);
        });


        const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
        alert(items.size)


        const map = new Map();

        const k1 = [&#39;a&#39;];
        const k2 = [&#39;a&#39;];

        map.set(k1, 111).set(k2, 222);

        alert(map.get(k2))

    </script>
</head>

<body>

</body>

</html>

登入後複製

那麼這裡有兩個困惑：

第一：<script type="text/babel"> 和我們平常用的&lt ;script type="text/javascript">有什麼差別。

第二：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 < _scripts.length; ++i) {
    var _script = _scripts[i];
    if (types.indexOf(_script.type) >= 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, &#39;Array&#39;, {
  // 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(&#39;Reduce of empty array with no initial value&#39;);
      }
    }
    for(;isRight ? index >= 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影片教學、程式設計影片】

以上是現在瀏覽器都支援es6嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！