前言
ES6 中引入了 Map 和 Set 两个新的数据结构，用于优化开发者在前端的处理数据的过程。Map 可以用于存储键值对，Set 可以用于存储唯一值。在接下来的文章中，我们将详细探讨 Map 和 Set 的使用技巧，帮助读者更好地掌握这些数据结构。
Map 的使用
Map 可以用于存储键值对，它提供了一种非常方便的方式来处理对象和数组，同时也是一个非常高效的数据结构。下面是一些使用 Map 的技巧：
创建一个 Map 对象
使用 Map 可以创建一个新的对象，并且可以使用它来存储键值对，比如：
var map = new Map();
map.set('name', 'John');
map.set('age', 25);在上面的代码中，我们使用了 new Map() 创建了一个新的 Map 对象，并使用了 map.set() 方法来设置键值对。
访问 Map 中的值
可以使用 map.get(key) 方法来访问 Map 中的值，比如：
console.log(map.get('name')); // John
console.log(map.get('age')); // 25判断 Map 是否包含某个键
可以使用 map.has(key) 方法来判断 Map 中是否包含某个键，比如：
console.log(map.has('name')); // true
console.log(map.has('address')); // false获取 Map 中的所有键和值
可以使用 map.keys() 和 map.values() 方法来获取 Map 中的所有键和值，比如：
console.log(map.keys()); // ["name", "age"] console.log(map.values()); // ["John", 25]
获取 Map 中键值对的数量
可以使用 map.size 属性来获取 Map 中键值对的数量，比如：
console.log(map.size); // 2
使用对象作为 Map 的键
除了字符串和数字之外，我们还可以使用对象作为 Map 的键，比如：
var user1 = { name: 'John', age: 25 };
var user2 = { name: 'Jane', age: 30 };
var map = new Map();
map.set(user1, 'user1');
map.set(user2, 'user2');
console.log(map.get(user1)); // user1
console.log(map.get(user2)); // user2在上面的代码中，我们使用了对象作为 Map 的键，并且使用了 map.set() 方法来设置键值对，并且使用了 map.get() 方法来获取对应的值。
Set 的使用
Set 是一种用于存储唯一值的数据结构，它可以帮助我们统一管理数据，避免出现重复数据的情况。下面是一些使用 Set 的技巧：
创建一个 Set 对象
使用 Set 可以创建一个新的对象，并且可以使用它来存储唯一值，比如：
var set = new Set();
set.add('apple');
set.add('banana');在上面的代码中，我们使用了 new Set() 创建了一个新的 Set 对象，并使用了 set.add() 方法来添加值。
判断 Set 是否包含某个值
可以使用 set.has(value) 方法来判断 Set 中是否包含某个值，比如：
console.log(set.has('apple')); // true
console.log(set.has('orange')); // false获取 Set 中的所有值
可以使用 set.values() 方法来获取 Set 中的所有值，比如：
console.log(set.values()); // ["apple", "banana"]
获取 Set 中的值的数量
可以使用 set.size 属性来获取 Set 中值的数量，比如：
console.log(set.size); // 2
使用数组初始化 Set 对象
我们可以在创建 Set 对象的时候使用数组来初始化对象，比如：
var fruits = ['apple', 'banana', 'orange'];
var set = new Set(fruits);
console.log(set.has('apple')); // true在上面的代码中，我们使用了数组 fruits 来初始化了 Set 对象，并使用了 set.has() 方法来检查 Set 中是否包含特定的值。
总结
在本文中，我们详细地讨论了 Map 和 Set 的使用技巧，并包含了实际的代码示例。希望读者可以从中学到有用的知识，并更好地掌握这些数据结构在前端开发中的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a689c95b1f8cacd25a106