JavaScript进阶-Map与Set集合

本文涉及的产品
函数计算FC,每月15万CU 3个月
任务调度 XXL-JOB 版免费试用,400 元额度,开发版规格
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
简介: 【6月更文挑战第20天】JavaScript的ES6引入了`Map`和`Set`,它们是高效处理集合数据的工具。`Map`允许任何类型的键,提供唯一键值对;`Set`存储唯一值。使用`Map`时,注意键可以非字符串,用`has`检查键存在。`Set`常用于数组去重,如`[...new Set(array)]`。了解它们的高级应用,如结构转换和高效查询,能提升代码质量。别忘了`WeakMap`用于弱引用键,防止内存泄漏。实践使用以加深理解。

在JavaScript的世界里,MapSet作为ES6引入的两种重要的数据结构,为开发者处理集合类型的数据提供了更为高效和灵活的方式。它们不仅弥补了传统对象和数组在某些场景下的不足,还带来了诸多新特性,让我们的代码更加简洁且易于理解。本文将深入浅出地探讨MapSet的使用方法、常见问题、易错点及避免策略,并通过代码示例加以说明。
image.png

Map集合

基本概念

Map是一种键值对的集合,其中的键可以是任何类型的值(包括对象),这与只能用字符串作为键的传统对象形成了鲜明对比。每个键值对在Map中都是唯一的,重复的键会被后者覆盖。

常见使用

const map = new Map();
map.set('name', 'Alice');
map.set(1, 'One');
console.log(map.get('name')); // 输出: Alice

易错点及避免

  • 易错点1: 错误地认为键必须是字符串。实际上,Map的键可以是任意类型。

    • 避免策略: 明确Map支持多种类型作为键,合理利用这一特性。
  • 易错点2: 忘记检查键是否存在就直接调用get方法。

    • 避免策略: 使用has方法先检查键是否存在,如if(map.has(key)) { ... }

Set集合

基本概念

Set是一种只包含唯一值的集合,它的成员值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。

常见使用

const set = new Set([1, 2, 3, 4, 5]);
console.log(set.size); // 输出: 5
set.add(5); // 不会添加重复的值
console.log(set.size); // 仍然是5

易错点及避免

  • 易错点1: 认为数组去重只能通过遍历实现。

    • 避免策略: 利用Set的特性直接转换,如[...new Set(array)]快速去重。
  • 易错点2: 忽视了Set的迭代性。

    • 避免策略: 利用for...of循环或扩展运算符遍历Set,进行操作。

Map与Set的高级应用

结构转换

MapSet都提供了丰富的API,可以方便地与其他数据结构相互转换,如将数组转换为Set去重后,再转换回数组。

高效查询

Map相比对象,在大量数据查询时性能更优,尤其是当键为复杂对象时,因为Map内部采用哈希表实现。

弱引用Map

WeakMapMap的一个变体,它对键实行弱引用,适合存储那些可能被垃圾回收机制回收的对象作为键,避免内存泄漏。

总结

MapSet作为JavaScript中的现代集合类型,极大地丰富了我们的编程工具箱。掌握它们的特性和正确使用方法,能够有效提升代码的效率和可读性。注意区分它们与传统数据结构的不同之处,避免常见的陷阱,合理利用它们提供的高级功能,将使你的JavaScript代码更加优雅和强大。实践是检验真理的唯一标准,尝试在实际项目中应用这些知识,你会逐渐感受到它们带来的便利。

目录
相关文章
|
1月前
|
存储 JavaScript Java
(Python基础)新时代语言!一起学习Python吧!(四):dict字典和set类型;切片类型、列表生成式;map和reduce迭代器;filter过滤函数、sorted排序函数;lambda函数
dict字典 Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度。 我们可以通过声明JS对象一样的方式声明dict
139 1
|
4月前
|
存储 缓存 JavaScript
Set和Map有什么区别?
Set和Map有什么区别?
366 1
|
30天前
|
存储 算法 容器
set_map的实现+set/map加持秒杀高频算法题锻炼算法思维
`set`基于红黑树实现,支持有序存储、自动去重,增删查效率为O(logN)。通过仿函数可自定义排序规则,配合空间配置器灵活管理内存。不支持修改元素值,迭代器失效需注意。`multiset`允许重复元素。常用于去重、排序及查找场景。
|
5月前
|
存储 JavaScript 前端开发
for...of循环在遍历Set和Map时的注意事项有哪些?
for...of循环在遍历Set和Map时的注意事项有哪些?
308 121
|
8月前
|
编译器 C++ 容器
【c++丨STL】基于红黑树模拟实现set和map(附源码)
本文基于红黑树的实现,模拟了STL中的`set`和`map`容器。通过封装同一棵红黑树并进行适配修改,实现了两种容器的功能。主要步骤包括:1) 修改红黑树节点结构以支持不同数据类型;2) 使用仿函数适配键值比较逻辑;3) 实现双向迭代器支持遍历操作;4) 封装`insert`、`find`等接口,并为`map`实现`operator[]`。最终,通过测试代码验证了功能的正确性。此实现减少了代码冗余,展示了模板与仿函数的强大灵活性。
229 2
|
5月前
|
安全 Java 数据库连接
让我们讲解一下 Map 集合遍历的方式
我是小假 期待与你的下一次相遇 ~
214 43
|
5月前
|
存储 C++ 容器
unordered_set、unordered_multiset、unordered_map、unordered_multimap的介绍及使用
unordered_set是不按特定顺序存储键值的关联式容器,其允许通过键值快速的索引到对应的元素。在unordered_set中,元素的值同时也是唯一地标识它的key。在内部,unordered_set中的元素没有按照任何特定的顺序排序,为了能在常数范围内找到指定的key,unordered_set将相同哈希值的键值放在相同的桶中。unordered_set容器通过key访问单个元素要比set快,但它通常在遍历元素子集的范围迭代方面效率较低。它的迭代器至少是前向迭代器。前向迭代器的特性。
247 0
|
5月前
|
编译器 C++ 容器
用一棵红黑树同时封装出map和set
再完成上面的代码后,我们的底层代码已经完成了,这时候已经是一个底层STL的红黑树了,已经已符合库里面的要求了,这时候我们是需要给他穿上对应的“衣服”,比如穿上set的“衣服”,那么这个穿上set的“衣服”,那么他就符合库里面set的要求了,同样map一样,这时候我们就需要实现set与map了。因此,上层容器map需要向底层红黑树提供一个仿函数,用于获取T当中的键值Key,这样一来,当底层红黑树当中需要比较两个结点的键值时,就可以通过这个仿函数来获取T当中的键值了。我们就可以使用仿函数了。
68 0
|
5月前
|
存储 编译器 容器
set、map、multiset、multimap的介绍及使用以及区别,注意事项
set是按照一定次序存储元素的容器,使用set的迭代器遍历set中的元素,可以得到有序序列。set当中存储元素的value都是唯一的,不可以重复,因此可以使用set进行去重。set默认是升序的,但是其内部默认不是按照大于比较,而是按照小于比较。set中的元素不能被修改,因为set在底层是用二叉搜索树来实现的,若是对二叉搜索树当中某个结点的值进行了修改,那么这棵树将不再是二叉搜索树。
241 0