Set与Map的奇妙世界：他们没那么复杂呀

妍思码匠

已于 2024-06-17 08:46:58 修改

阅读量616

点赞数 20

分类专栏：妍思码匠的前端乐园文章标签： es6 前端 ecmascript

于 2024-05-28 14:36:17 首次发布

本文链接：https://blog.csdn.net/wjs0406/article/details/139264957

版权

妍思码匠的前端乐园专栏收录该内容

31 篇文章 0 订阅

订阅专栏

前言

在JavaScript的世界里，ES6引入了两个非常强大且实用的数据结构：Set和Map。这两个结构为我们的编程生活带来了极大的便利，它们就像是我们日常生活中的工具，帮助我们更好地管理数据和信息。今天，让我们一起走进这个奇妙的世界，通过生活中的场景来理解它们的工作原理。

Set：无序的集合

想象一下，你正在整理一堆杂乱无章的照片，你希望将它们按照拍摄的时间顺序进行排序。在JavaScript中，Set可以帮助你轻松地完成这项工作。Set是一个无序的集合，它只存储唯一的值，无论是原始值还是对象引用。

示例：

假设你有一堆重复的照片，你想要创建一个不包含重复照片的集合。使用Set，你可以轻松地实现这一点。

let uniquePhotos = new Set([
  'photo1.jpg',
  'photo2.jpg',
  'photo1.jpg',
  'photo3.jpg'
]);
console.log(uniquePhotos); // Set(3) { 'photo1.jpg', 'photo2.jpg', 'photo3.jpg' }

在上面的代码中，我们使用了new Set()来创建一个新的Set对象，然后向其中添加了几张照片的文件名。尽管我们添加了重复的照片文件名，但Set会自动去除重复项，最终只保留唯一的值。

常用API：

set(key, value)：向Map中添加一个新的键值对。
get(key)：获取Map中某个键对应的值。
delete(key)：删除Map中的一个特定键值对。
has(key)：判断Map中是否存在一个特定的键。
size：返回Map中键值对的数量。
clear()：清空整个Map。

Map：键值对的映射

现在，让我们再想象一个场景，你正在整理一本电话簿，你需要记录每个人的姓名和电话号码。在JavaScript中，Map可以帮助你轻松地完成这项工作。Map是一个键值对的集合，它允许你使用任何类型的值作为键（key）或值（value）。

示例：

假设你正在创建一个电话簿，你想要记录每个人的姓名和电话号码。使用Map，你可以轻松地实现这一点。

let phoneBook = new Map();
phoneBook.set('Alice', '123-456-7890');
phoneBook.set('Bob', '234-567-8901');
phoneBook.set('Alice', '098-765-4321');
console.log(phoneBook);
// Map(3) {"Alice" => "098-765-4321", "Bob" => "234-567-8901", Symbol(Symbol()) => "123-456-7890"}

在上面的代码中，我们使用了new Map()来创建一个新的Map对象。然后，我们使用set()方法添加了几个键值对。尽管我们尝试为"Alice"添加了两个电话号码，但Map只会保留最后一个设置的键值对。这意味着"Alice"的电话号码被更新为"098-765-4321"。

常用API：

set(key, value)：向Map中添加一个新的键值对。
get(key)：获取Map中某个键对应的值。
delete(key)：删除Map中的一个特定键值对。
has(key)：判断Map中是否存在一个特定的键。
size：返回Map中键值对的数量。
clear()：清空整个Map。

遍历Set与Map

Set的遍历

Set对象是一个迭代器，你可以使用for...of循环来遍历它的所有元素

示例：

let mySet = new Set([1, 2, 3, 4, 5]);
for (let element of mySet) {
  console.log(element);
}
// 输出:
// 1
// 2
// 3
// 4
// 5

Map的遍历

Map对象也是一个迭代器，你可以使用for...of循环来遍历它的所有键值对。

示例：

let myMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
for (let [key, value] of myMap) {
  console.log(key + ': ' + value);
}
// 输出:
// a: 1
// b: 2
// c: 3