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
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
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: 8c78d84458486d07b8a14f463890ae34 Code>Was ist der Unterschied?
Zweitens: Was genau macht Polyfill? Erklären wir es separat. Schauen wir uns einen unkomprimierten Code an: https://cdn.bootcss.com/babel-core/5.8.38/browser.js
Entdecken Hier sind einige Codeausschnitte:
//页面加载后，执行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();
};Ich denke, der Text/Babel, um den wir uns Sorgen machen, ist hier: vartypes = ["text/ecmascript-6", "text/6to5", "text/babel", "module"]
Holen Sie sich die mit den oben genannten drei Elementen markierten Schritte auf der Seite und verwenden Sie dann die Transformationsbibliothek, um sie zu laden und zur Ausführung in ES5 zu übersetzen. type = "text/babel"
$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;
};
};那么这里有两个困惑：
第一：92a6e9ab54f288a64ee405c1a8585725 和我们平时用的5cd6e472395e766622bc5d31b556eb7aWas 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】
