이제 모든 브라우저가 es6을 지원합니까?
- 青灯夜游원래의
- 2022-10-20 14:20:204985검색
아니요. ES6는 많은 새로운 기능을 제공하지만 모든 브라우저가 이를 완벽하게 지원할 수 있는 것은 아닙니다. 예를 들어 IE7~11 버전은 기본적으로 ES6을 지원하지 않지만 Edge12-14는 가장 친숙한 새로운 기능 중 일부만 지원합니다. ES6의 새로운 기능에 대한 유일한 브라우저는 Chrome과 Firefox입니다. Chrome은 버전 51부터 ES6 새로운 기능의 97%를 지원할 수 있으며, Firefox는 버전 53부터 ES6 새로운 기능의 97%를 지원할 수 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
ES6는 많은 새로운 기능을 제공하지만 모든 브라우저가 이를 완벽하게 지원할 수 있는 것은 아닙니다. 다행스럽게도 이제 주요 브라우저들이 ES6의 새로운 기능과의 호환성을 가속화하고 있습니다. 그 중 ES6의 새로운 기능에 가장 친숙한 브라우저는 Chrome과 Firefox입니다.
ES6 구문의 브라우저 호환성 소개
| Browser | 지원되지 않는 버전 | 부분적으로 지원되는 버전 | 지원되는 버전 |
|---|---|---|---|
| IE | 6-10 | 1 1 | |
| Edge | 12-14 | 15-18, 79-87 | |
| Firefox | 2-5 | 6-53 | 54-86 |
| 크롬 | 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 |
| Op era Mini | all | ||
| Android 브라우저 | 2.1-4.3 | 4.4-4.4.4 | 81 |
| Opera Mobile | 12-12.1 | 59 | |
| Android용 Chrome | 87 | ||
| Android용 Firefox | 83 | ||
| UC Android용 브라우저 | |
12.12 | |
| 삼성인터넷 | 4 | 5-13.0 | |
| QQ 브라우저 | 10.4 | ||
| 바이두 브라우저 |
|
7.12 | |
| KaiOS 브라우저 | 2.5 |
|
각 브라우저의 ES6 지원에 대한 자세한 내용은 https://caniuse.com/?search=es6
에서 확인하세요. 브라우저가 ES6를 지원하는지 알고 싶다면 http://ruanyf.github.io/es를 확인하세요. -checker/index.cn.html
ES2015
Chrome에 대한 데스크톱 브라우저 지원: 버전 51부터 ES6의 새로운 기능을 97% 지원할 수 있습니다.
Firefox: 버전 53부터 ES6의 새로운 기능을 97% 지원합니다.
Safari: 버전 10부터 ES6의 새로운 기능을 99% 지원합니다.
IE: Edge 15는 ES6의 새로운 기능을 96% 지원할 수 있습니다.
Edge 14는 ES6의 새로운 기능을 93% 지원할 수 있습니다. (IE7~11은 기본적으로 ES6을 지원하지 않습니다.)
IE11은 ES6를 완전히 포기하며 다시 질질 끌고 있는 모습을 볼 수 있으며, Edge는 향후 지원을 하게 될 것입니다.
IE11은 ES6과 효과적으로 호환됩니다
그렇다면 IE11에서 순수 ES6 스크립트를 실행하는 방법은 무엇일까요? Babel은 효과적인 솔루션을 제공합니다
두 가지 스크립트를 소개합니다:
https://cdn. -core/5.8.35/browser.min.js
이 스크립트는 es6 구문 수준 명령문
https://cdn.bootcss.com/babel-core/5.8.35 /browser-polyfill.min을 변환합니다. js
이 스크립트는 Set Map Promise 등의 새로운 구문 API를 변환합니다.
스크립트 블록의 type = "text/babel"을 표시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>那么这里有两个困惑：
第一：92a6e9ab54f288a64ee405c1a8585725 和我们平时用的5cd6e472395e766622bc5d31b556eb7a
//页面加载后，执行runScripts方法
if (global.addEventListener) {
global.addEventListener("DOMContentLoaded", runScripts, false);
} else if (global.attachEvent) {
global.attachEvent("onload", runScripts);
}그래서 있습니다. 여기에는 두 가지 혼란이 있습니다.
첫 번째: 34b4749191894131594805ab82e8fc43와 우리가 일반적으로 사용하는 a4284548e758b79511d9c15bbf138200 코드>차이점은 무엇인가요? <br>
여기에 몇 가지가 있습니다. 코드 조각:
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;
};
};우리가 우려하는 text/babel은 여기에 있는 것 같습니다: var type = ["text/ecmascript-6", "text/6to5", "text/babel", "module"]
또한 코드 조각을 찾으세요: rrreee찾을 수 있습니다 Polyfill은 Arrary에 Reduce를 구현하는 데 사용되는 createArrayReduce와 같은 많은 새로운 메서드를 추가했습니다.
Note위의 두 파일을 도입하면 기본적으로 ES6에 대한 대부분의 브라우저 지원 문제가 해결됩니다. 하지만 다시 말하지만, 변환 도구를 사용하더라도 프로덕션 환경에서 ES6에 대한 브라우저 지원이 낮은 새로운 기능을 많이 사용하는 것은 여전히 권장되지 않습니다. 결국 이는 온라인 변환 후에 수행되므로 효율성이 상대적으로 낮습니다. 또한 ES6에 대한 브라우저 지원이 변경됨에 따라 이러한 변환 스크립트도 자주 업데이트해야 하며 이는 필연적으로 향후 유지 관리에 영향을 미칩니다. 【관련 추천:
javascript 비디오 튜토리얼🎜, 🎜프로그래밍 비디오🎜】🎜위 내용은 이제 모든 브라우저가 es6을 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!