Adakah semua pelayar menyokong es6 sekarang?-masalah biasa-php.cn

Adakah semua pelayar menyokong es6 sekarang?

青灯夜游

Lepaskan： 2022-10-20 14:20:20

asal

5072 orang telah melayarinya

Tidak; ES6 menyediakan banyak ciri baharu, tetapi tidak semua pelayar boleh menyokongnya dengan sempurna Contohnya, versi IE7~11 pada dasarnya tidak menyokong ES6, dan Edge12-14 hanya menyokong beberapa ciri ES6 baharu ES6 Penyemak imbas yang paling mesra pengguna untuk ciri baharu ialah Chrome dan Firefox Chrome boleh menyokong 97% ciri baharu ES6 bermula dari versi 51, dan Firefox boleh menyokong 97% ciri baharu ES6 bermula dari versi 53.

Adakah semua pelayar menyokong es6 sekarang?

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

ES6 menyediakan banyak ciri baharu, tetapi tidak semua penyemak imbas boleh menyokongnya sepenuhnya. Nasib baik, pelayar utama kini mempercepatkan keserasian mereka dengan ciri baharu ES6 Antaranya, pelayar paling mesra untuk ciri baharu ES6 ialah Chrome dan Firefox.

Pengenalan kepada keserasian penyemak imbas sintaks ES6

12-1410-13.7, 14.2

Untuk butiran tentang sokongan setiap penyemak imbas untuk ES6, sila semak https://caniuse.com/?search=es6

Jika anda ingin tahu sama ada penyemak imbas anda menyokong ES6, sila semak http:// ruanyf .github.io/es-checker/index.cn.html

Sokongan penyemak imbas desktop untuk ES2015

Chrome: Bermula dari versi 51, ia boleh menyokong 97% daripada ciri baharu ES6.
Firefox: Menyokong 97% ciri baharu ES6 bermula dari versi 53.
Safari: Menyokong 99% ciri baharu ES6 bermula dari versi 10.
IE: Edge 15 boleh menyokong 96% ciri baharu ES6.
Edge 14 boleh menyokong 93% ciri ES6 baharu. (IE7~11 pada dasarnya tidak menyokong ES6)

Dapat dilihat bahawa IE11 telah menyeret kakinya sekali lagi dan menyerah sepenuhnya pada ES6, meninggalkan Edge untuk menyokong masa depannya.

IE11 secara berkesan serasi dengan ES6

Jadi bagaimana untuk membuat skrip ES6 tulen dijalankan di bawah IE11 menyediakan penyelesaian yang berkesan

Memperkenalkan dua skrip:

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

Skrip menukar sintaks es6 -penyataan peringkat

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

Ini skrip menukar API sintaks baharu, seperti Set Map Promise dan kaedah lain

tandakan blok skrip 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>

Salin selepas log masuk

kemudian Terdapat dua kekeliruan di sini:

Pertama: Apakah perbezaan antara <script type="text/babel"> dan <script type="text/javascript"> yang biasa kita gunakan.

Kedua: Apakah sebenarnya yang dilakukan oleh polyfill?

Mari kita jelaskan secara berasingan. browser.js
Menjumpai coretan kod berikut:

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

Salin selepas log masuk

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();
};

Salin selepas log masuk

Saya rasa teks/babel yang kami perhatikan ada di sini: var types = ["text/ecmascript-6 ", "text/6to5", "text/babel", "module"];

Dapatkan langkah yang ditandakan dengan tiga item di atas pada halaman, dan kemudian gunakan perpustakaan transformasi untuk memuatkan dan menterjemahkannya ke ES5 untuk perlaksanaan.

Jadi apakah yang dilakukan oleh polyfill? Teruskan membaca kod https://cdn.bootcss.com/babel-core/5.8.38/browser-polyfill.js
Juga cari sekeping kod:

$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;
  };
};

Salin selepas log masuk

Anda boleh mendapati ployfill menambahkan banyak kaedah baharu pada Arrary, seperti createArrayReduce, yang digunakan untuk melaksanakan pengurangan.

Nota

Memperkenalkan dua fail di atas pada asasnya menyelesaikan kebanyakan sokongan penyemak imbas untuk ES6.

Tetapi sekali lagi: walaupun anda menggunakan alat penukaran, masih tidak disyorkan untuk menggunakan sejumlah besar ciri baharu yang mempunyai sokongan penyemak imbas rendah untuk ES6 dalam persekitaran pengeluaran. Lagipun, ini dilakukan selepas penukaran dalam talian, dan kecekapannya agak rendah. Selain itu, sebagai sokongan penyemak imbas untuk ES6 berubah, skrip penukaran ini juga perlu dikemas kini dengan kerap, yang pasti akan memberi kesan pada penyelenggaraan kemudian.

[Cadangan berkaitan: tutorial video javascript, Video pengaturcaraan]

Pelayar

Tiada versi yang Disokong

Versi yang disokong separa

Versi yang disokong

6-10

浏览器	不支持的版本	部分支持的版本	支持的版本
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

Tepi

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 td>

38-72

iOS Safari

3.2-6.1

7-9.3

Opera Mini

semua

td>

Pelayar Android

2.1-4.3

4.4- 4.4.4

Opera Mobile

12-12.1 td>

Chrome untuk Android

Firefox untuk Android

td>

Pelayar UC untuk Android

12.12

Internet Samsung

5-13.0

Pelayar QQ

10.4

Pelayar Baidu

7.12

Pelayar KaiOS

2.5

Atas ialah kandungan terperinci Adakah semua pelayar menyokong es6 sekarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!