Maison >Problème commun >Tous les navigateurs prennent-ils désormais en charge Es6 ?
Tous les navigateurs prennent-ils désormais en charge Es6 ?
- 青灯夜游original
- 2022-10-20 14:20:205196parcourir
Non ; ES6 offre de nombreuses nouvelles fonctionnalités, mais tous les navigateurs ne peuvent pas parfaitement les prendre en charge. Par exemple, les versions IE7~11 ne prennent pas en charge ES6, tandis qu'Edge12-14 ne prend en charge que certaines des nouvelles fonctionnalités d'ES6 ; aux nouvelles fonctionnalités d'ES6 Les seuls navigateurs sont Chrome et Firefox. Chrome peut prendre en charge 97 % des nouvelles fonctionnalités d'ES6 à partir de la version 51, et Firefox peut prendre en charge 97 % des nouvelles fonctionnalités d'ES6 à partir de la version 53.
L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.
ES6 offre de nombreuses nouvelles fonctionnalités, mais tous les navigateurs ne peuvent pas les prendre entièrement en charge. Heureusement, les principaux navigateurs accélèrent désormais leur compatibilité avec les nouvelles fonctionnalités d'ES6. Parmi eux, les navigateurs les plus conviviaux pour les nouvelles fonctionnalités d'ES6 sont Chrome et Firefox.
Introduction à la compatibilité des navigateurs avec la syntaxe ES6
| Navigateur | Version non prise en charge | Version partiellement prise en charge | Version prise en charge |
|---|---|---|---|
| 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 |
| Opéra | 10- 12.1 | 15-37 | 38-72 |
| iOS Safari | 3.2-6.1 | 7-9.3 | 10-13.7, 14.2 |
| Op era Mini | tous | ||
| Navigateur Android | 2.1-4.3 | 4.4-4.4.4 | 81 |
| Opera Mobile | 12-12.1 | 59 | |
| Chrome pour Android | 87 | ||
| Firefox pour Android | 83 | ||
| Navigateur UC pour Android | |
|
12.12 |
| Samsung Internet | 4 | 5-13.0 | |
| Navigateur QQ | 10.4 | ||
| Navigateur Baidu |
|
7.12 | |
| Navigateur KaiOS | 2.5 |
|
Pour plus de détails sur la prise en charge de ES6 par chaque navigateur, veuillez consulter https://caniuse.com/?search=es6
Si vous souhaitez savoir si votre navigateur prend en charge ES6, veuillez consulter http://ruanyf.github.io/ es -checker/index.cn.html
Support du navigateur de bureau pour ES2015
Chrome : à partir de la version 51, il peut prendre en charge 97 % des nouvelles fonctionnalités de ES6.
Firefox : prend en charge 97 % des nouvelles fonctionnalités d'ES6 à partir de la version 53.
Safari : prend en charge 99 % des nouvelles fonctionnalités d'ES6 à partir de la version 10.
IE : Edge 15 peut prendre en charge 96 % des nouvelles fonctionnalités de l'ES6.
Edge 14 peut prendre en charge 93 % des nouvelles fonctionnalités de l'ES6. (IE7 ~ 11 ne prend fondamentalement pas en charge ES6)
On peut voir qu'IE11 traîne à nouveau les pieds, abandonnant complètement ES6, et Edge soutiendra son avenir.
IE11 est effectivement compatible avec ES6
Alors, comment faire fonctionner des scripts ES6 purs sous IE11 Babel fournit une solution efficace
Présentation de deux scripts :
https://bootcss.com/babel. -core/5.8.35/browser.min.js
Ce script convertit les instructions au niveau de la syntaxe es6
https://cdn.bootcss.com/babel-core/5.8.35 /browser-polyfill.min. js
Ce script convertit la nouvelle API de syntaxe, telle que Set Map Promise, etc.
Marquez le type = "text/babel" du bloc de scripttype = "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>那么这里有两个困惑：
第一：92a6e9ab54f288a64ee405c1a8585725 和我们平时用的5cd6e472395e766622bc5d31b556eb7a
//页面加载后，执行runScripts方法
if (global.addEventListener) {
global.addEventListener("DOMContentLoaded", runScripts, false);
} else if (global.attachEvent) {
global.attachEvent("onload", runScripts);
}Il y a donc deux confusions ici :
Premièrement : le 34b4749191894131594805ab82e8fc43 et le 06bac64abc8259de0202eedf43e98ffb code>Quelle est la différence. <br>
Découvrez-en en voici quelques-uns. extraits de code :
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();
};$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;
};
};Je pense que le text/babel qui nous préoccupe est ici : var types = ["text/ecmascript-6", "text/6to5", "text/babel", "module"]; Obtenez les étapes marquées avec les trois éléments ci-dessus sur la page, puis utilisez la bibliothèque de transformation pour les charger et les traduire en ES5 pour exécution.
Localisez également un morceau de code :
rrreeeVous pouvez le trouver polyfill donne Arrary a ajouté de nombreuses nouvelles méthodes, telles que createArrayReduce, qui est utilisée pour implémenter la réduction.
RemarqueL'introduction des deux fichiers ci-dessus résout essentiellement la plupart des problèmes de prise en charge du navigateur pour ES6.
Mais encore une fois, même si vous utilisez l'outil de conversion, il n'est toujours pas recommandé d'utiliser un grand nombre de nouvelles fonctionnalités qui ont une faible prise en charge du navigateur pour ES6 dans un environnement de production. Après tout, cela est effectué après la conversion en ligne et l'efficacité est relativement faible. De plus, à mesure que la prise en charge du navigateur pour ES6 évolue, ces scripts de conversion doivent également être mis à jour fréquemment, ce qui aura inévitablement un impact sur la maintenance ultérieure. 【Recommandations associées : Tutoriel vidéo javascript,
Vidéo de programmation🎜】🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!