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.
| Pelayar |
Tiada versi yang Disokong |
Versi yang disokong separa |
Versi yang disokong |
| IE |
6-10 |
11 |
|
| 浏览器 |
不支持的版本 |
部分支持的版本 |
支持的版本 |
| 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 |
| 12-1415-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 | 10-13.7, 14.2
| Opera Mini |
semua |
td> |
|
| Pelayar Android |
2.1-4.3 | 4.4- 4.4.4 |
81 |
| Opera Mobile |
12-12.1 td> |
|
59 |
| Chrome untuk Android |
|
87 |
| Firefox untuk Android |
|
td> |
83 |
| Pelayar UC untuk Android |
|
| 12.12 |
| Internet Samsung |
|
4 |
5-13.0 |
| Pelayar QQ |
|
|
10.4 |
| Pelayar Baidu |
|
7.12 |
|
Pelayar KaiOS |
|
2.5 |
|
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 = ['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))
</script>
</head>
<body>
</body>
</html> kemudian Terdapat dua kekeliruan di sini:
Pertama: Apakah perbezaan antara 92a6e9ab54f288a64ee405c1a8585725 dan 5cd6e472395e766622bc5d31b556eb7a 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, '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 = 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('Reduce of empty array with no initial value');
}
}
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]
Atas ialah kandungan terperinci Adakah semua pelayar menyokong es6 sekarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
