在前端开发中，我们经常需要处理数据集合或者键值对。ES6 中的 Set 和 Map 数据结构提供了一种更加高效和方便的方式来操作这些数据。
Set 数据结构
Set 是一种数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。Set 实例可以用来存储任何类型的唯一值，无论是原始值或者是对象引用。
创建 Set
创建一个空的 Set：
const set = new Set();
创建一个包含初始值的 Set：
const set = new Set([1, 2, 3]);
Set 的基本操作
添加元素：
set.add(4); set.add(5);
删除元素：
set.delete(3);
判断元素是否存在：
set.has(2);
清空 Set：
set.clear();
Set 的遍历
遍历 Set 中的元素：
set.forEach((value, key) => console.log(value));
使用 for...of 遍历 Set：
for (let value of set) {
console.log(value);
}Set 的应用场景
Set 可以用于数组去重：
const arr = [1, 2, 3, 1, 2]; const set = new Set(arr); const uniqueArr = Array.from(set);
Map 数据结构
Map 是一种数据结构，类似于对象，也是键值对的集合。但是，Map 的键可以是任意类型，不仅仅是字符串或者 Symbol。
创建 Map
创建一个空的 Map：
const map = new Map();
创建一个包含初始键值对的 Map：
const map = new Map([['name', '张三'], ['age', 18]]);
Map 的基本操作
添加键值对：
map.set('gender', '男');
map.set('hobby', ['篮球', '游泳']);获取键值对：
map.get('name');删除键值对：
map.delete('age');判断键是否存在：
map.has('gender');清空 Map：
map.clear();
Map 的遍历
遍历 Map 中的键值对：
map.forEach((value, key) => console.log(key + ': ' + value));
使用 for...of 遍历 Map 中的键值对：
for (let [key, value] of map) {
console.log(key + ': ' + value);
}Map 的应用场景
Map 可以用于缓存数据：
// javascriptcn.com 代码示例
const cache = new Map();
function getData(url) {
if (cache.has(url)) {
return Promise.resolve(cache.get(url));
} else {
return fetch(url).then(res => {
cache.set(url, res);
return res;
});
}
}总结
Set 和 Map 数据结构是 ES6 中非常有用的新特性，能够提高数据操作的效率和方便性。在实际开发中，我们可以根据具体的需求选择使用 Set 或者 Map，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656b8d01d2f5e1655d3f5dae