ES12 中新增了两个集合类型：Map 和 Set。这两种集合类型都有着不同的用法和优点，在前端开发中非常常用，本文就来详细介绍一下它们的用法和一些注意事项。
Map
Map 可以看做是一种键值对的集合，它和 Object 类似，但它可以使用任意类型的值作为键，而不仅限于字符串。以下是 Map 的一些基本操作：
创建 Map
const Map = new Map();
添加元素到 Map
Map.set('name', 'John');
Map.set('age', 25);从 Map 删除元素
Map.delete('name');检查 Map 中是否有某个键
Map.has('name');获取 Map 中某个键对应的值
Map.get('name');获取 Map 的长度
Map.size;
遍历 Map 的方法
Map.keys() // 返回 Map 中所有键的数组 Map.values() // 返回 Map 中所有值的数组 Map.entries() // 返回 Map 中所有键值对的数组 Map.forEach() // 遍历 Map
Map 是一种非常实用的数据结构，比起传统的 Object 来说更加灵活和方便。在使用的时候可以随意将各种类型的值作为键，比如说对象、函数等等。
Set
Set 是一种没有重复元素的集合，它的所有元素都是唯一的。以下是 Set 的一些基本操作：
创建 Set
const Set = new Set();
添加元素到 Set
Set.add('apple');
Set.add('banana');从 Set 删除元素
Set.delete('apple');检查 Set 中是否含有某元素
Set.has('apple');获取 Set 的长度
Set.size;
遍历 Set 的元素
Set.keys() // 返回 Set 中所有元素的数组 Set.values() // 返回 Set 中所有元素的数组 Set.entries() // 返回 Set 中所有元素的数组 Set.forEach() // 遍历 Set
相比于数组或者对象，Set 的去重功能也是很实用的，尤其是对于一些需要数据去重的场景。
注意事项
在使用 Map 和 Set 的时候，需要注意以下一些问题：
- Map 和 Set 的性能比 Object 和数组要好。
- 虽然 Map 和 Set 的功能比较强大，但在一些简单的场景下还是可以使用 Object 和数组来替代。
- 在使用 Map 和 Set 时需要注意兼容性，如果需要支持老版浏览器，需要使用 polyfill。
在实际项目中，根据实际的场景选用合适的数据结构非常重要，一方面可以提高代码的效率和可读性，另一方面也可以有效避免一些常见的问题。
示例代码
Map
// javascriptcn.com 代码示例
const map = new Map()
map.set('name', 'John')
map.set({'name': 'John'}, 'anything')
console.log(map.get('name')) // expected output: John
for (let [key, value] of map) {
console.log(key + ' = ' + value)
}
Set
// javascriptcn.com 代码示例
const set = new Set()
set.add('apple')
set.add('banana')
console.log(set.size) // expected output: 2
for (let value of set) {
console.log(value)
}总结
本文主要介绍了 ES12 中新增的两种集合类型：Map 和 Set，它们的使用方法和注意事项。在实际开发中，可以根据实际场景选用合适的数据结构，以提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f90147f6b2d6eab30abe47