怎么使浏览器兼容ES6语法

最新推荐文章于 2023-07-31 13:24:55 发布

注释科长

最新推荐文章于 2023-07-31 13:24:55 发布

阅读量3.7k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/ZhushiKezhang/article/details/89946541

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

随着前端技术的发现，es6语法在被更大范围的使用。
浏览器支持情况：支持度比较好的是Chrome和Firefox浏览器，支持度最差的是IE（即便是IE11，支持度也很差）。

哪里有灾难，哪里就有勇士和救兵，针对ES6的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的ES6语法转换成ES5，相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel，jsx，traceur，es6-shim等。

虽然出现了各种转换工具，但是到目前为止，还没有一款工具能百分百将ES6的新特性完美地转换成ES5，因为在ES6新增的内容中，存在一些无法在ES5中找到与之匹配的语法，所以不建议在生产环境中使用支持度较低的新特性，后续的教程章节中介绍的新特性前端君也会特意提醒它的兼容性。

下面以【babel转换工具】为例讲解。

一、引用browser.js

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./babel/browser.min.js"></script>
    <script type="text/babel">
        const list = ['one','two','three']; 
        list.forEach( (item,index) => { 
            alert(item + (index+1)); 
        });
    </script>
</body>
</html>

注意：承载ES6代码的script标签的type的值要设为text/babel。

引入browser.js能使大部分浏览器支持ES6，但是：

Babel 默认只转换新的 JavaScript 句法，而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁）的技术。

二、引用browser-polyfill.js

引入以上两个文件基本就解决了浏览器对ES6的大部分支持问题。

再次强调：即使使用了转换工具，还是不建议在生产环境大量地使用浏览器对ES6支持度较低的新特性的特性。

注释科长

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
怎么使浏览器兼容ES6语法

随着前端技术的发现，es6语法在被更大范围的使用。浏览器支持情况：支持度比较好的是Chrome和Firefox浏览器，支持度最差的是IE（即便是IE11，支持度也很差）。哪里有灾难，哪里就有勇士和救兵，针对ES6的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的ES6语法转换成ES5，相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel，jsx，trac...
复制链接

扫一扫

专栏目录