|
Weitere Informationen zur Unterstützung jedes Browsers für ES6 finden Sie unter https://caniuse.com/?search=es6.
Wenn Sie wissen möchten, ob Ihr Browser ES6 unterstützt, überprüfen Sie bitte http://ruanyf.github.io/es -checker/index.cn.html
Desktop-Browser-Unterstützung für ES2015
Chrome: Ab Version 51 können 97 % der neuen ES6-Funktionen unterstützt werden.
Firefox: Unterstützt 97 % der neuen ES6-Funktionen ab Version 53.
Safari: Unterstützt 99 % der neuen ES6-Funktionen ab Version 10.
IE: Edge 15 kann 96 % der neuen ES6-Funktionen unterstützen.
Edge 14 kann 93 % der neuen ES6-Funktionen unterstützen. (IE7 ~ 11 unterstützt ES6 grundsätzlich nicht)
Es ist ersichtlich, dass IE11 wieder langsamer wird und ES6 vollständig aufgibt und Edge seine Zukunft unterstützen wird. „IE11 ist effektiv mit ES6 kompatibel.“ -core/5.8.35/browser.min.js
Dieses Skript konvertiert Anweisungen auf ES6-Syntaxebenehttps://cdn.bootcss.com/babel-core/5.8.35 /browser-polyfill.min. js
Dieses Skript konvertiert die neue Syntax-API, wie Set Map Promise usw.
Markieren Sie den type = "text/babel" des Skriptblocks <!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>So gibt es Hier gibt es zwei Verwirrungen:
Erstens: <script type="text/babel"></script> und der
$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;
};
};那么这里有两个困惑：
第一：<script type="text/babel"></script> 和我们平时用的<script type="text/javascript"></script>Was macht Polyfill? Lesen Sie den Code weiter: https://cdn.bootcss.com/babel-core/5.8.38/browser-polyfill.js
Suchen Sie auch einen Codeabschnitt: rrreee
Das können Sie finden Polyfill gibt Arrary viele neue Methoden, wie zum Beispiel createArrayReduce, das zum Implementieren von Reduce verwendet wird.
Hinweis
Die Einführung der beiden oben genannten Dateien löst im Grunde die meisten Supportprobleme des Browsers für ES6.
Aber auch wenn Sie das Konvertierungstool verwenden, ist es immer noch nicht empfehlenswert, eine große Anzahl neuer Funktionen zu verwenden, die eine geringe Browserunterstützung für ES6 in einer Produktionsumgebung bieten. Schließlich erfolgt dies nach der Online-Konvertierung und die Effizienz ist relativ gering. Da sich die Browserunterstützung für ES6 ändert, müssen diese Konvertierungsskripte außerdem häufig aktualisiert werden, was sich zwangsläufig auf die spätere Wartung auswirkt.
【Verwandte Empfehlungen: Javascript-Video-Tutorial
, Programmiervideo】
