ES6 Set 和 Map 数据结构：别让它们溜走！

前端

2024-02-12 17:11:48

哈喽，各位技术迷们！今天，让我们一起踏上ES6数据结构的时空之旅，重温Set和Map这两位遗忘已久的伙伴。虽然它们看似简单，但它们的强大足以惊艳整个技术界。所以，让我们不再浪费时间，一起重温这两位好朋友！

Set：无序且唯一的集合

想象一下Set，它是ES6中一种神奇的数据结构，它就像一个专属派对，只允许不重复的元素参加。每个成员都独一无二，就像派对中的每一个客人一样，他们各有各的风采。Set的内部就好像一个无序的舞池，元素们自由自在，没有固定的顺序。

Map：巧妙有序的字典

现在，让我们认识Map，另一位迷人的ES6数据结构。它就像一本有组织的词典，里面装满了键值对。想象一下，键就像单词，而值就像它们对应的定义。Map把它们一一配对，巧妙地将数据组织得井井有条。

妙用无穷的Set和Map

Set和Map并非泛泛之辈，它们在现实世界的应用中大放异彩。举个例子，Set可以用来消除数组中的重复项，而Map可以将对象转换为易于管理的键值对集合。此外，Set还可以快速检查元素是否存在，而Map可以通过键快速检索值。

实战演练：体验Set和Map的魔力

准备好亲手感受Set和Map的魅力了吗？让我们用一些代码实战一下！

// 创建一个Set
const mySet = new Set([1, 2, 3, 4, 5]);

// 添加一个元素
mySet.add(6);

// 检查元素是否存在
console.log(mySet.has(3)); // true

// 遍历Set
for (let item of mySet) {
  console.log(item); // 输出：1, 2, 3, 4, 5, 6
}


// 创建一个Map
const myMap = new Map([
  ['name', 'John'],
  ['age', 30]
]);

// 设置一个键值对
myMap.set('occupation', 'Developer');

// 获取一个值
console.log(myMap.get('name')); // John

// 遍历Map
for (let [key, value] of myMap) {
  console.log(`${key}: ${value}`); // 输出：name: John, age: 30, occupation: Developer
}