在前端开发中，我们常常需要使用键值对存储数据。传统的对象和数组虽然可以实现这一功能，但是在某些情况下会显得不够灵活和高效。ES6 中引入了 Map 和 Set 两个新的数据结构，它们可以更好地满足我们的需求。
Map
Map 是一种键值对的集合，其中的键和值可以是任意类型。与对象不同的是，Map 中的键可以是任意类型，包括原始类型、对象、函数等等。Map 的 API 提供了很多操作方法，例如 set、get、has、delete 等等。
创建 Map
可以使用 new Map() 创建一个空的 Map，也可以使用数组初始化 Map：
const map = new Map([ ['name', 'Tom'], ['age', 18], [true, 'yes'], ]);
操作 Map
向 Map 中添加键值对可以使用 set 方法：
map.set('gender', 'male');获取 Map 中的值可以使用 get 方法：
map.get('name'); // 'Tom'检查 Map 中是否存在某个键可以使用 has 方法：
map.has('gender'); // true从 Map 中删除某个键可以使用 delete 方法：
map.delete('age');遍历 Map
Map 提供了多种遍历方式，例如使用 for...of 循环遍历 Map 中的键值对：
for (const [key, value] of map) {
console.log(key, value);
}使用 forEach 方法遍历 Map 中的键值对：
map.forEach((value, key) => {
console.log(key, value);
});应用场景
Map 的灵活性使得它可以应用于各种场景，例如：
- 缓存数据
- 存储数据
- 实现 LRU 缓存算法
Set
Set 是一种不允许重复值的集合，其中的值可以是任意类型。Set 的 API 提供了很多操作方法，例如 add、has、delete 等等。
创建 Set
可以使用 new Set() 创建一个空的 Set，也可以使用数组初始化 Set：
const set = new Set([1, 2, 3]);
操作 Set
向 Set 中添加值可以使用 add 方法：
set.add(4);
检查 Set 中是否存在某个值可以使用 has 方法：
set.has(2); // true
从 Set 中删除某个值可以使用 delete 方法：
set.delete(3);
遍历 Set
Set 提供了多种遍历方式，例如使用 for...of 循环遍历 Set 中的值：
for (const value of set) {
console.log(value);
}使用 forEach 方法遍历 Set 中的值：
set.forEach(value => {
console.log(value);
});应用场景
Set 的去重性使得它可以应用于各种场景，例如：
- 数组去重
- 统计数组中不同元素的个数
- 实现并集、交集、差集等集合运算
总结
Map 和 Set 是 ES6 中引入的两个新的数据结构，它们可以更好地满足我们在前端开发中的键值存储需求。Map 的灵活性使得它可以存储任意类型的键和值，而 Set 的去重性使得它可以对值进行去重操作。在实际开发中，我们可以根据具体需求选择使用 Map 或 Set，以提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658539e5d2f5e1655dfe549d