一文搞懂Map与Set的用法和区别!

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 前言作为前端开发人员,我们最常用的一些数据结构就是 Object、Array 之类的,毕竟它们使用起来非常的方便。往往有些刚入门的同学都会忽视 Set 和 Map 这两种数据结构的存在,因为能用 set 和 map 实现的,基本上也可以使用对象或数组实现,而且还更简单。但是,存在必然合理,当你真正了解 Map 和 Set 之后,你就会发现它们原来时如此美好!

1.基本概念


我们先来了解以下 MapSet 的基本概念,这样才能帮助我们更好的使用。虽然我们通常把这两种数据结构混合着来讲,但事实上它们它们还是有挺大区别的!


1.1 Map(字典)


想要迅速了解一个新的数据结构或 API 是,查看官网是一个不错的选择。Map 在官网上也有解释,我们一起来看下。


官网解释:

Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值)都可以作为一个键或一个值。

官网的这句话非常精炼,我们从上面这句话中总结如下几个关键词:


  • 键值对
  • 记住插入顺序
  • 任意值作为键


一看到键值对,难免会想到对象。事实确实如此,Map 与我们平常所用的对象非常类似,它是一种类对象的数据结构,所以我们通常称它为 Map 对象


但是我们可以把它说得更为官方一点:Map 字典。关于程序中字典的概念大家可以下去了解一下。


特点总结:

  • Map 对象这种数据结构和和对象类型,都已键值对的形式存储数据,即 key-vlue 形式。
  • Map 对象存储的数据是有序的,而我们平常使用的对象是无序的,所以通常当我们需要使用对象形式(键值对)存储数据且需要有序时,采用 Map 对象进行存储。
  • Map 对象的键值可以是任意类型,我们平时使用的对象只能使用字符串作为键。


1.2 Set(集合)


Map 类似,我们同样先来看一看官网是怎么解释 Set 这个数据结构的。


官网的解释:

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。


Set 的解释比 Map 的解释还要精炼,我们从中提取出几个关键词:

  • 任何类型
  • 唯一值


上面关键词中我们需要重点关注“唯一值”,这说明使用 Set 存储的数据是不会重复的,除此之外,Set 也是一个对象,但是它是一个类数组对象,也就是说它长得像数组,我们通常直接称它为 Set 对象。


当然也可以官方一点的称它:Set 集合


特点总结:

  • Set 对象是一个类数组对象,它长得就很像数组。
  • Set 对象存储的值是不重复的,所以我们通常使用它来实现数组去重。
  • Set 对象存储的数据不是键值对的形式,而且它可以存储任何类型的数据。


2.基本使用


我们平常使用 Array 或者 Object 的时候,都是直接采用[变量] = [][变量] = {}的形式来进行初始化。而这里我们所讲的 MapSet 数据结构它们都是以构造函数的形式出现的,所以我们通常使用 new Set()或者 new Map()的形式初始化的。


2.1 Map 基本使用


初始化 map 对象:

let myMap = new Map();


初始化 map 时传入数据:


由于 Map 对象是一个构造函数,所以我们在初始化的时候可以传入默认数据的,只不过我们需要注意传入默认数据的格式,它默认接收一个二维数组。

let defaultMap = new Map([['name', '张三'], ['age', 20]]);


打印出来看看结果:



36.png


插入数据:

myMap.set('name', '小猪课堂'); // 字符串作为键
myMap.set(12, '会飞的猪'); // number 类型作为键
myMap.set({}, '知乎'); // 对象类型作为键


我们先打印出来看看结果:


37.png


获取长度:

我们传统的对象可以通过 Object.key().length 来获取对象长度,而 map 对象自带 size 属性获取对象长度。

let myMapSize = myMap.size;


获取值:

let objKey = {};
myMap.set('name', '小猪课堂'); // 字符串作为键
myMap.set(12, '会飞的猪'); // number 类型作为键
myMap.set(objKey, '知乎'); // 对象类型作为键
let name = myMap.get('name');
let age = myMap.get(12);
let any = myMap.get(objKey);
console.log(name, age, any); // 小猪课堂 会飞的猪 知乎


上段代码中需要注意的是不能使用 myMap.get({})的形式获取数据,因为 objKey!=={}


删除某个值:

myMap.delete('name');


判断某个值是否存在:

myMap.has('name'); // 返回 bool 值


2.2 Set 基本使用


Set对象的使用方式和Map对象的使用方式非常的类似,只不过存储的数据格式不一样罢了。这里需要注意的Set对象存储的不是键值对形式,它只存储了值,没有键,就和数组类似。


初始化Set对象:

let mySet = new Set();


初始化Set对象带有默认值:


Map类似,Set初始化时也可以初始化默认数据。

let defaultSet = new Set(['张三', 12, true]);


一起来看看输出结果:


38.png


38.png


插入数据:

mySet.add(1);
mySet.add('小猪课堂');


打印结果:


39.png


获取长度:

let mySetSize = mySet.size;


获取值:

由于Set对象存储的不是键值对形式,所以未提供get方法获取值,我们通常遍历它获取值:

mySet.forEach((item) => {
  console.log(item)
})


删除某个值:

mySet.delete(1);


判断某个值是否存在:

mySet.has(1); // 返回Boolean值


3.Map和Set区别


如果我们学会了它们两者如何使用,或多或少都知道它们的区别在哪里,我们这里为大家总结一下它们的区别要点:

  • MapSet查找速度都非常快,时间复杂度为O(1),而数组查找的时间复杂度为O(n)
  • Map对象初始化的值为一个二维数组,Set对象初始化的值为一维数组。
  • Map对象和Set对象都不允许键重复(可以将Set对象的键想象成值)。
  • Map对象的键是不能改的,但是值能改,Set对象只能通过迭代器来更改值。


4.使用场景介绍

4.1 Set对象使用场景


数组去重

这是大家很熟悉的一种场景,使用Set对象的唯一性值特性方便的给我们数组去重。


代码如下:

let arr = [1, 2, 3, 4, 5, 6, 3, 2, 5, 3, 2];
console.log([...new Set(arr)]); // [1, 2, 3, 4, 5, 6]


需要注意的是Set对象是一个类数组,我们使用...扩展运算符将一个类数组转化为了一个真正的数组。


4.2 Map对象使用场景


数字类型充当键


代码如下:

let errors = new Map([
  [400, 'InvalidParameter'],
  [404, 'Not found'],
  [500, 'InternalError']
]);
console.log(errors);


输出结果:



40.png

40.png

我们可以使用Map对象建立一个请求状态码对象字典,因为状态码是数字类型,所以使用Map对象很合适。

除了该场景外,如果需要保证对象的顺序,那么也是可以使用Map对象的。


5.思考点


前面我们说SetMap的插入删除效率为什么很高呢?

这里简单讲一下,更加深入需要大家自己下去好好学习一下数据结构了。


简述原因:


mapset存储的所有元素都是以节点的方式来进行存储的,这种节点结构和链表有点类似。我们都知道链表的特点是插入和删除都非常快,时间复杂度为O(1),两个节点通过指针相连,删除或者增加元素时,我们只是重新更改了指针的指向,不想数组那样,掺入或删除之后需要重新排序。


总结


Set对象和Map对象有很多优点的,比如说性能比较好等等,我们需要一一去体会它们的优缺点。你不如在每次创建数据结构之前想一想:使用Object更好还是Map更好呢?使用Array更好还是Set更好呢? 当然,如果深究SetMap底层原理之后,你会发现它们的实现原理就是红黑树。


如果觉得文章太繁琐或者没看懂,可以观看视频: 小猪课堂



相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
23天前
|
算法
你对Collection中Set、List、Map理解?
你对Collection中Set、List、Map理解?
57 18
你对Collection中Set、List、Map理解?
|
16天前
|
存储 缓存 安全
只会“有序无序”?面试官嫌弃的List、Set、Map回答!
小米,一位热衷于技术分享的程序员,通过与朋友小林的对话,详细解析了Java面试中常见的List、Set、Map三者之间的区别,不仅涵盖了它们的基本特性,还深入探讨了各自的实现原理及应用场景,帮助面试者更好地准备相关问题。
54 20
|
1月前
|
存储 C++ 容器
【C++】map、set基本用法
本文介绍了C++ STL中的`map`和`set`两种关联容器。`map`用于存储键值对,每个键唯一;而`set`存储唯一元素,不包含值。两者均基于红黑树实现,支持高效的查找、插入和删除操作。文中详细列举了它们的构造方法、迭代器、容量检查、元素修改等常用接口,并简要对比了`map`与`set`的主要差异。此外,还介绍了允许重复元素的`multiset`和`multimap`。
33 3
【C++】map、set基本用法
|
1月前
|
存储 算法 C++
【C++】unordered_map(set)
C++中的`unordered`容器(如`std::unordered_set`、`std::unordered_map`)基于哈希表实现,提供高效的查找、插入和删除操作。哈希表通过哈希函数将元素映射到特定的“桶”中,每个桶可存储一个或多个元素,以处理哈希冲突。主要组成部分包括哈希表、哈希函数、冲突处理机制、负载因子和再散列,以及迭代器。哈希函数用于计算元素的哈希值,冲突通过开链法解决,负载因子控制哈希表的扩展。迭代器支持遍历容器中的元素。`unordered_map`和`unordered_set`的插入、查找和删除操作在理想情况下时间复杂度为O(1),但在冲突较多时可能退化为O(n)。
23 5
|
2月前
|
存储 JavaScript 前端开发
Set、Map、WeakSet 和 WeakMap 的区别
在 JavaScript 中,Set 和 Map 用于存储唯一值和键值对,支持多种操作方法,如添加、删除和检查元素。WeakSet 和 WeakMap 则存储弱引用的对象,有助于防止内存泄漏,适合特定场景使用。
|
2月前
|
存储 缓存 Java
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
44 1
|
3月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
4月前
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set
|
4月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。