ES6 中引入了 Map 对象，一个可以保存键值对的数据结构，相比于传统的对象，Map 对象的键可以是任意类型，并且保持原来的顺序。然而，在转译 ES6 代码时，有些 Babel 配置并不能正确转译 Map 对象，本文将介绍如何正确地转译 ES6 中的 Map 对象。
Map 对象的基本用法
Map 对象与普通对象的使用方式类似，但是可以通过任意类型作为键来存储和检索数据，这使得它在某些场景下比传统对象更加方便。我们可以使用 new Map() 来创建一个新的 Map 对象：
const map = new Map()
然后，我们就可以向 Map 对象中添加键值对了：
map.set('key1', 'value1')
map.set('key2', 'value2')这里的键可以是任意类型，比如一个函数或者对象：
function foo () {}
const obj = { a: 1 }
map.set(foo, 'function')
map.set(obj, 'object')我们也可以使用 get 方法来获取指定键对应的值：
map.get('key1') // 'value1'
map.get(foo) // 'function'
map.get(obj) // 'object'使用 Babel 转译 Map 对象
如果在 ES6 项目中使用了 Map 对象，那么需要使用 Babel 将代码转译成 ES5 以便兼容旧版浏览器。常见的 Babel 转译配置如下：
{
"presets": ["@babel/preset-env"]
}然而，这个默认配置并不能正确地转译 Map 对象。如果项目中使用了 Map 对象，并且按照上面的配置进行转译，那么代码可能会在旧版浏览器中出现错误。为了正确转译 Map 对象，我们需要添加插件 @babel/plugin-transform-runtime。
首先，我们需要安装依赖：
npm install --save-dev @babel/plugin-transform-runtime @babel/runtime
然后，我们需要更新 Babel 配置：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}这个配置将在转译时自动引入 @babel/runtime，并且使用运行时的方式来模拟一些新的函数和类，从而达到转译更加正确和兼容的目的。
示例代码
-- -------------------- ---- ------- -- --- ------- ----- --- - --- ----- --------------- --------- --------------- --------- -------- --- -- -- ----- --- - - -- - - ------------ ----------- ------------ --------- ---------------------------- ------------------------- ------------------------- -- ----- -- --- -- ----- --- - --- ----- --------------- --------- --------------- --------- -------- --- -- -- ----- --- - - -- - - ------------ ----------- ------------ --------- ---------------------------- ------------------------- -------------------------
总结
ES6 中的 Map 对象提供了一种新的数据结构，可以方便地存储和检索任意类型的键值对。但是，在转译 ES6 代码时需要格外注意，如果不是正确地转译 Map 对象，就可能会导致代码错误或者兼容性问题。通过本文的学习，我们可以了解到如何正确地使用 Babel 转译 ES6 中的 Map 对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b8d2c5add4f0e0ff164bcb