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

Rumah

masalah biasa

Adakah semua pelayar menyokong es6 sekarang?

青灯夜游

Oct 20, 2022 pm 02:20 PM

es6

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>

kemudian Terdapat dua kekeliruan di sini:

Pertama: Apakah perbezaan antara <script type="text/babel"></script> dan <script type="text/javascript"></script> 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);
}

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

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

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!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

DeepSeek Web Version Masuk RasmiMar 12, 2025 pm 01:42 PM

Deepseek Kuda AI Darks Domestik telah meningkat dengan kuat, mengejutkan industri AI global! Syarikat kecerdasan buatan Cina ini, yang hanya ditubuhkan selama setahun setengah, telah memenangi pujian yang luas dari pengguna global untuk mockups sumber bebas dan terbuka, DeepSeek-V3 dan DeepSeek-R1. DeepSeek-R1 kini dilancarkan sepenuhnya, dengan prestasi yang setanding dengan versi rasmi OpenAIO1! Anda boleh mengalami fungsi yang kuat di laman web, aplikasinya dan antara muka API. Kaedah Muat turun: Menyokong sistem iOS dan Android, pengguna boleh memuat turunnya melalui App Store; Pintu Rasmi Versi Web DeepSeek: HT

Cara menyelesaikan masalah pelayan yang sibuk untuk DeepSeekMar 12, 2025 pm 01:39 PM

DeepSeek: Bagaimana menangani AI yang popular yang sesak dengan pelayan? Sebagai AI panas pada tahun 2025, DeepSeek adalah sumber percuma dan terbuka dan mempunyai prestasi yang setanding dengan versi rasmi OpenAIO1, yang menunjukkan popularitinya. Walau bagaimanapun, kesesuaian yang tinggi juga membawa masalah kesibukan pelayan. Artikel ini akan menganalisis sebab -sebab dan menyediakan strategi mengatasi. DeepSeek Web Version Masuk: https://www.deepseek.com/deepseek Server Sibuk Sebab: Akses serentak yang tinggi: Ciri -ciri percuma dan berkuasa DeepSeek menarik sejumlah besar pengguna untuk digunakan pada masa yang sama, mengakibatkan beban pelayan yang berlebihan. Serangan Siber: Dilaporkan bahawa DeepSeek mempunyai kesan terhadap industri kewangan AS.

Pintu Laman Web Rasmi DeepSeek yang mendalamMar 12, 2025 pm 01:33 PM

Pada awal tahun 2025, domestik AI "Deepseek" membuat debut yang menakjubkan! Model AI sumber percuma dan terbuka ini mempunyai prestasi yang setanding dengan versi rasmi OpenAI's O1, dan telah dilancarkan sepenuhnya di sisi web, API dan API, menyokong penggunaan multi-terminal iOS, Android dan versi web. Carian mendalam mengenai laman web rasmi dan panduan penggunaan DeepSeek: Alamat Laman Web Rasmi: https://www.deepseek.com/using Langkah-langkah untuk versi web: Klik pautan di atas untuk memasukkan laman web rasmi DeepSeek. Klik butang "Mula Perbualan" di laman utama. Untuk kegunaan pertama, anda perlu log masuk dengan kod pengesahan telefon bimbit anda. Selepas log masuk, anda boleh memasukkan antara muka dialog. DeepSeek berkuasa, boleh menulis kod, membaca fail, dan membuat kod

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.