コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > よくある問題 > すべてのブラウザが es6 をサポートするようになりましたか?

すべてのブラウザが es6 をサポートするようになりましたか?

青灯夜游
リリース： 2022-10-20 14:20:20
オリジナル
5143 人が閲覧しました

いいえ; ES6 は多くの新機能を提供しますが、すべてのブラウザがそれを完全にサポートできるわけではありません。たとえば、IE7 ～ 11 バージョンは基本的に ES6 をサポートせず、Edge12 ～ 14 は ES6 の新機能の一部のみをサポートします。 ES6 新機能を備えた最もユーザー フレンドリーなブラウザは Chrome と Firefox です。Chrome はバージョン 51 以降の ES6 新機能の 97% をサポートでき、Firefox はバージョン 53 以降の ES6 新機能の 97% をサポートできます。

すべてのブラウザが es6 をサポートするようになりましたか?

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ES6 は多くの新機能を提供しますが、すべてのブラウザがそれらを完全にサポートできるわけではありません。幸いなことに現在、主要なブラウザは ES6 の新機能への対応を加速しており、その中でも ES6 の新機能に最も対応しやすいブラウザは Chrome と Firefox です。

ES6 構文のブラウザ互換性の概要

##12-1415-18、79-87Firefox2-56-5354-86Chrome 4-2021-5051-90サファリ3.1-77.1-9.110-13.1、14、TP##オペラ##iOS Safari7-9.310-13.7、14.2Opera Mini##Android ブラウザ #12-12.1Android 版 Chrome ##83Samsung インターネット45-13.0 ##10.4##7.122.5
ブラウザ サポートされていないバージョン 部分的にサポートされているバージョン サポートされているバージョン
IE 6-10 11
エッジ
10-12.1 15- 37 38-72
3.2-6.1
すべて

#2.1-4.34.4-4.4 .4 81 Opera モバイル
#59
##87
Android 版 Firefox

Android 用 UC ブラウザ
##12.12


QQ ブラウザ

Baidu ブラウザ
KaiOS ブラウザ

各ブラウザの ES6 サポートの詳細については、https://caniuse.com/?search=es6

お使いのブラウザが ES6 をサポートしているかどうかを知りたい場合は、http://ruanyf を確認してください。 .github.io/es-checker/index.cn.html

ES2015 のデスクトップ ブラウザのサポート

  • Chrome: バージョン 51 以降、 ES6 の新機能の 97% をサポートできます。

  • Firefox: バージョン 53 以降の ES6 新機能の 97% をサポートします。

  • Safari: バージョン 10 以降の ES6 の新機能の 99% をサポートします。

  • IE: Edge 15 は、新しい ES6 機能の 96% をサポートできます。

  • Edge 14 は、新しい ES6 機能の 93% をサポートできます。 （IE7～11は基本的にES6には対応していません）

IE11が再び足を引きずってES6を完全に諦め、Edgeがその将来をサポートする姿勢が見て取れます。

IE11 は ES6 と事実上互換性があります

では、純粋な ES6 スクリプトを IE11 で実行するにはどうすればよいでしょうか? Babel は効果的なソリューションを提供します。

2 つのスクリプトを紹介します:

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

このスクリプトは、Set Map Promise などの新しい構文 API を変換します。メソッド

スクリプト ブロックをマークします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>
ログイン後にコピー

したがって、ここには 2 つの混乱があります:

最初: <script type="text/babel"> と、通常使用する ;script type &lt ="text/javascript">違いは何ですか。

2 番目: ポリフィルは正確に何をするのですか?

個別に説明しましょう。非圧縮コードを見てみましょう: 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 type = ["text/ecmascript-6", "text/ 6to5" 、"text/babel"、"module"];

ページ上の上記 3 つの項目でマークされたステップを取得し、変換ライブラリを使用してそれらをロードし、実行のために 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 は、reduce の実装に使用される createArrayReduce など、多くの新しいメソッドを Arrary に追加していることがわかります。

注

上記の 2 つのファイルを導入すると、基本的にブラウザの ES6 サポートのほとんどが解決されます。

ただし、繰り返しになりますが、変換ツールを使用する場合でも、実稼働環境で ES6 に対するブラウザーのサポートが低い多数の新機能を使用することはお勧めできません。結局のところ、これはオンライン変換後に実行されるため、効率は比較的低くなります。さらに、ES6 に対するブラウザのサポートが変更されると、これらの変換スクリプトも頻繁に更新する必要があり、その後のメンテナンスに影響を与えることは避けられません。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、プログラミング ビデオ ]

以上がすべてのブラウザが es6 をサポートするようになりましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
es6
ソース：php.cn
前の記事：USBハブとは何ですか 次の記事：信号再構成とは
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2274
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2407
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2022
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1910
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1981
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート