怎么让ie兼容es6，ie兼容ES6的方法，包括箭头函数，Promise，async，await

最新推荐文章于 2025-06-30 09:17:00 发布

执笔看墨花开

最新推荐文章于 2025-06-30 09:17:00 发布

阅读量4.4w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： ES6 JavaScript

本文链接：https://blog.youkuaiyun.com/qq_31201781/article/details/79099630

JavaScript 同时被 2 个专栏收录

22 篇文章

订阅专栏

ES6

1 篇文章

订阅专栏

本文介绍如何使用ES6语法结合Babel进行前端开发，包括基本语法示例及IE浏览器下Promise、async/await的支持方案。通过引入polyfill.js确保了在不同浏览器间的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐使用npm+babel工程化开发，极度不建议这种过时的方法

一、如下示例：使用es6语法（不包含Promise）

script标签的type的值设为`text/babel`

<script type="text/babel">
	const arr1=[1,2,3]
	const arr2=[...arr1]
	console.log(arr2);
	let arr3=arr2.map((x)=>x*2)
	console.log(arr3);
	const [x,y,z]=[[...arr3]]
	console.log(x);

	class Point {
		constructor(x, y) {
			this.x = x;
			this.y = y;
		}

		toString() {
			return '(' + this.x + ', ' + this.y + ')';
		}
	}
	console.log(new Point(1, 2).toString());
	console.log(new Promise(function(){})); 
</script>
<script src="browser.min.js"></script>

即在<script>标签后导入browser.min.js(browser.min.js下载链接，不需要积分)就行了。结果为：

index.js:4 [1, 2, 3]
index.js:5 [2, 4, 6]
index.js:7 [2, 4, 6]
index.js:20 (1, 2)

二、IE使用Promise，async,await

在头部增加polyfill.js即可。

polyfill.js安装方法：npm install babel-polyfill --save

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>polyfill</title>
    <script src="../node_modules/babel-polyfill/dist/polyfill.js"></script>
</head>
<body>
<script type="text/babel">
    const arr1=[1,2,3]
    const arr2=[...arr1]
    console.log(arr2);
    let arr3=arr2.map((x)=>x*2)
    console.log(arr3);
    const [x,y,z]=[[...arr3]]
    console.log(x);

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }

        toString() {
            return '(' + this.x + ', ' + this.y + ')';
        }
    }
    console.log(new Point(1, 2).toString());
    console.log(new Promise(function(){}))
    function getUser() {
      return new Promise((resolve) => {
        setTimeout(()=>{
          resolve('lzy')
        },2000)
      })

    }
    async function getUserName() {
      let userName=await getUser()
      console.log(userName)
    }
    getUserName()
</script>
<script src="browser.min.js"></script>
</body>
</html>