简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 일반적인 문제 > 본문

이제 모든 브라우저가 es6을 지원합니까?

青灯夜游
풀어 주다： 2022-10-20 14:20:20
원래의
4984명이 탐색했습니다.

아니요. ES6는 많은 새로운 기능을 제공하지만 모든 브라우저가 이를 완벽하게 지원할 수 있는 것은 아닙니다. 예를 들어 IE7~11 버전은 기본적으로 ES6을 지원하지 않지만 Edge12-14는 가장 친숙한 새로운 기능 중 일부만 지원합니다. ES6의 새로운 기능에 대한 유일한 브라우저는 Chrome과 Firefox입니다. Chrome은 버전 51부터 ES6 새로운 기능의 97%를 지원할 수 있으며, Firefox는 버전 53부터 ES6 새로운 기능의 97%를 지원할 수 있습니다.

이제 모든 브라우저가 es6을 지원합니까?

이 튜토리얼의 운영 환경: 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 = [&#39;one&#39;, &#39;two&#39;, &#39;three&#39;];
        list.forEach((item, index) => {
            alert(item + (index + 1));
        });


        let promise = new Promise(function (resolve, reject) {
            alert(&#39;Promise&#39;);
            resolve();
        });

        promise.then(function () {
            alert(&#39;resolved.&#39;);
        });


        const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
        alert(items.size)


        const map = new Map();

        const k1 = [&#39;a&#39;];
        const k2 = [&#39;a&#39;];

        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">와 우리가 일반적으로 사용하는

인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！