ES7 是 ECMAScript 2016 的官方标准，它在 JavaScript 基础上增加了很多新特性和语法糖，如 async/await 关键字、Array.prototype.includes 方法、指数运算符等。但是这些新特性在旧版的浏览器中可能无法正常运行，这给前端开发者带来了很多兼容性问题。在本文中，我们将学习如何解决 ES7 代码在旧浏览器中的兼容性问题。
Babel转换代码
Babel 是一个 JavaScript 编译器，可以将 ES7 代码转换成 ES5 代码，使得它可以在旧版的浏览器中运行。我们可以使用 @babel/preset-env 插件，并设置其中的 targets 属性来指定要支持的浏览器版本。以下是一个使用 Babel 转换 ES7 代码的示例：
-- -------------------- ---- -------
-- ----
--- ------- ---------- ----------- -----------------
-- - -------- ------- ----------
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
-
-
-
-
-以上代码片段将把 ES7 代码转换成在 Chrome 58 和 Internet Explorer 11 中运行的 ES5 代码。对于不支持转码的语法，则需要借助对应的插件来实现（如 @babel/plugin-transform-runtime 插件用于支持使用了 async/await 关键字的代码）。
Polyfill填坑
Babel 虽然能够将 ES7 代码转换成 ES5 代码，但是一些 JavaScript 内置对象的新特性（例如数组的 includes 方法）并不能被简单的转换解决，此时就需要引入 polyfill。Polyfill 是一份 JavaScript 代码库，它提供了一些 ECMAScript 规范中已经标准化的新特性的实现，以填补旧版浏览器对这些特性的缺失。以下是一个使用 Polyfill 解决浏览器缺失 includes 方法的示例：
// 安装依赖 npm install --save core-js // 在应用程序入口处引入 polyfill import 'core-js/es/array/includes';
以上代码片段将引入 core-js 代码库中的 Array.includes 方法实现，从而填补旧版浏览器对该方法的缺失。
总结
在 ES7 中，JavaScript 引入了很多新特性和语法糖，但是这些新特性在旧版浏览器中可能无法正常运行。为了解决这种兼容性问题，我们可以使用 Babel 转换代码，使其可以在旧浏览器中运行，同时使用 Polyfill 来填补旧版浏览器对新特性的缺失。通过这种方式，我们可以保证我们的代码在不同版本的浏览器中都能够正常运行。
参考源码
-- -------------------- ---- ------- -- ------- ----- ------ - --- -- - -- -- --- --- - -- --- ------ - ------------ -------------------- -- -- -- ---------- ----- ------ - --- -- -- -- ---- -------------------------------- -- ---- --------------------------------- -- -----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64efdbcef6b2d6eab39c9565