现在，越来越多的开发者开始使用 ES6 来写 JavaScript 代码。ES6 提供了很多新特性，例如箭头函数、数组解构、类、模板字符串等等，这些特性让代码更加简洁、易读、易维护。然而，由于浏览器兼容性的问题，我们通常需要使用 Babel 来将 ES6 代码转换为 ES5 代码，从而在现代浏览器和旧版浏览器上运行。
但是，你是否知道，Babel 并不支持全部的 ES6 语法？在编写 ES6 代码时，需要注意一些地方，不然可能会遇到一些问题。
Babel 支持的 ES6 语法
Babel 支持大部分的 ES6 语法，例如箭头函数、类、解构等等。可以通过 Babel 官网的 preset-env 预设 preset，来支持大部分的 ES6 新特性。
// 例子：使用箭头函数、let、解构 const sum = (a, b) => a + b; let [x, y] = [1, 2]; console.log(sum(x, y));
通过上述代码片段，可以看到使用了箭头函数、let、解构语法。运行代码，会输出 3，代码正常工作。
Babel 不支持的 ES6 语法
Babel 虽然支持大部分语法，但是对于一些较新的语法特性，例如 Promise、WeakMap、Map 等等，需要安装相应的 polyfill 才能实现兼容。例如，下面这段代码：
-- -------------------- ---- -------
-- ----- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------
-- -----
---
------------------- -- -
-------------------
-- -------- ------- -----
---运行上述代码，可能会发现在旧版的浏览器上报错，可能是因为浏览器不支持 Promise。此时，需要安装 promise 的 polyfill，才能在不支持 Promise 的浏览器上运行。
我们可以使用 @babel/polyfill 打包出入口文件，将其引入项目中。
-- -------------------- ---- -------
-- ----- ---------------
------ ------------------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------
-- -----
---
------------------- -- -
-------------------
-- -------- ------- -----
---还有一些语法，例如 decorator 等等，需要使用对应的插件来转化为 ES5 语法，这时候，我们需要安装对应的 babel 插件包，例如 @babel/plugin-proposal-decorators，才能正常编译。
总结
ES6 提供的新特性让我们开发 JavaScript 代码变得更加方便快捷。但是，由于浏览器兼容性的问题，我们需要使用 Babel 将代码转换为 ES5 代码。需要注意的是，Babel 并不支持所有的 ES6 语法，有些语法需要使用 polyfill 来实现兼容，有些语法甚至需要使用插件来进行扩展。我们需要了解这些内容，才能更好地编写 ES6 代码，同时也可以更深入地了解和学习 JavaScript 语言。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa592a48841e9894687600