es6新增Set和Map的用法及区别

本文介绍了前端开发中Set和Map这两种数据结构,尽管它们在JavaScript中不常用,但它们有独特的功能如记住插入顺序、存储唯一值等。文章详细讲解了它们的构造、使用方法,以及在去重、数字类型键和保证顺序等方面的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,前端开发中常常用到 object和 array这种数据结构,set和map的使用相对较少,往往被忽视。

因为在js中set和map能实现的,用对象和数组也基本能实现。但是万物存在即合理!真正体验set和map之后,才能发现他们的妙处!

1.map(字典)

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

        关键词:1.键值对

                      2.记住插入顺序

                      3.任意值可以作为键

2. set(集合)

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

        关键词:1.任何类型

                       2..唯一值

3. Set和Map使用,是以构造函数的形式来实现。通常用 new Set()或者 new Map()的形式初始化的。

Map的使用:初始化传入数据:map对象是一个构造函数可传入默认数据,默认接收一个二维数组。

eg: let  myMap = new Map ([[ ‘name’:‘张三’],['age',20]])

插入数据:myMap.Set(‘name’,'李华')

                myMap.Set(12,'杰克')<任意类型可为键>

获取值: myMap.get()

获取长度:传统对象可通过 object.keys().length来获取长度,map对象自带size属性获取长度。

删除的方法 delete、判断值是否存在的方法 has

set的使用:set存储的不是键值对的形式,他只存储了值,没有键。是类数组

初始化Set对象, let myset = new Set()

set也可以初始化数据,  let myset = new Set(['张立',23,true]),接收一个数组

插入数据:mySet.add(1)

删除的方法 delete、判断值是否存在的方法 has

因为set不是键值对,所以没有get方法获取值,通常采用遍历的方法

mySet.foreach((item)=>{

console.log(item)

})

优势:map和set的查找速度都很快,时间复杂度为0(1),而数组查找的时间复杂为0(n)

4 使用场景:

set的使用场景:

数组去重

let arr = [ 2, 5, 3, 2,4,8,8];

console.log([...new Set(arr)]);

Map使用场景:

数字类型充当键:

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

如果需要保证对象的顺序,也是可以使用Map对象的

map 和 Set插入效率高

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值