아니요. 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>那么这里有两个困惑：
第一：<script type="text/babel"> 和我们平时用的<script type="text/javascript">
//页面加载后，执行runScripts方法
if (global.addEventListener) {
global.addEventListener("DOMContentLoaded", runScripts, false);
} else if (global.attachEvent) {
global.attachEvent("onload", runScripts);
}그래서 있습니다. 여기에는 두 가지 혼란이 있습니다.
첫 번째: <script type="text/babel">와 우리가 일반적으로 사용하는
![Node.js 전체 입문 튜토리얼 [es6+npm+express+webpack+promise]](https://img.php.cn/upload/course/000/000/068/6242b4c8f1a39624.png)
![JavaScript 기본 구문 [dom|bom|es6 새 구문|jQuery|데이터 시각화 echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
