随着 JavaScript 技术的不断发展，ECMAScript 成为了前端开发者必须学习的一项技能。ECMAScript 不断更新，每个版本都会增加新的特性和语法。最新版本是 ES10，它包含了一些实用的新特性和语法，如 Array 的 flat 和 flatMap 方法、Object 的 fromEntries 方法等。但是，不同的浏览器并不能完全支持 ES10 的新特性，因此我们需要让我们的代码兼容 ES6 及以下版本。
Babel
Babel 是一个流行的 JavaScript 编译器，它能够将最新的 JavaScript 代码编译成旧版浏览器支持的 JavaScript 代码。Babel 能够将 ES6 及以上版本的代码转换成 ES5 或更低版本的代码。我们可以在配置文件 .babelrc 中指定需要转换的代码。
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
----- -----
------- -----
---------- -----
--------- -----
--------- ------
-
--
-
-上面的配置文件中，我们将 Babel 的 @babel/preset-env 预设放入了数组 presets 中，并给该预设传入了一个 targets 对象。这个对象中指定了我们的代码需要兼容的浏览器版本，其中 ie, edge, firefox, chrome, safari 分别表示 IE、Edge、火狐、谷歌、Safari 的最低版本。Babel 会根据这些配置生成对应的代码。
Polyfill
除了使用 Babel 编译代码之外，另一种可以兼容 ES6 及以下版本的方法是使用 Polyfill。Polyfill 是一段代码，能够让新的 JavaScript 特性在旧版的浏览器中运行。
要使用 Polyfill，我们需要在代码中引入相关的库。以兼容 Array 的 flat 方法为例，我们可以使用 core-js 库来引入该方法的 Polyfill。
import "core-js/es/array/flat";
上面的代码中，我们使用了 import 语句引入了 core-js 库，并在其中引入了 Array 的 flat 方法的 Polyfill。
TypeScript
TypeScript 是 JavaScript 的一个超集，它支持 ECMAScript 最新的特性和语法。TypeScript 能够将高级代码转换成低级代码，并且不同于 Babel，TypeScript 能够在类型检查的同时对代码进行转换。
使用 TypeScript 可以兼容 ES6 及以下版本，而且能够更好地解决 JavaScript 中的类型问题。TypeScript 本质上是一种静态类型检查器，对于大型的项目来说，TypeScript 能够帮助我们更好地管理代码，降低维护成本。
结论
以上是如何兼容 ES6 及以下版本的方法，我们可以根据实际情况选择其中一种或多种方式进行兼容。无论使用哪种方式，重点在于我们要做到代码的兼容，让我们的代码能够在不同的浏览器中运行。虽然新特性非常实用，但在充分了解浏览器兼容性和项目需求的情况下，我们也可以暂时放弃新特性以达到最好的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f375e6e1e8e99bfaf73720