前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javascript之set和weakset的用法

javascript之set和weakset的用法

作者头像
xinxin-l
发布2022-03-30 16:07:53
5700
发布2022-03-30 16:07:53
举报

今天我们来介绍一下数据结构Setweakset

  • set
  • weakset

简单介绍

Set其实类似于数组,但是其中的成员值都是唯一的,没有重复的值。

如何构造一个Set?

Set本身也是一个构造函数,用来生成Set,其参数可以是空,可以是数组,可以是类似数组的对象(比如NodeList)

如果不清楚NodeList可以看这篇文章:

(4条消息) javascript 中的nodeList理解_我只是搬运工的博客-CSDN博客_js listnode

构造Set时的不同参数类型如下代码举例:

代码语言:javascript
复制
//参数为空
let set=new Set();

//参数为数组
let a=new Set([2,3,4,5,6,6,8,NaN,NaN,{},{}])

//参数是类似数组的对象
let tem=document.querySelectorAll('p')

==Set去重的依据是什么呢?==

类似于“===”,但是有几个不同之处:

在Set中,两个NaN是相等的,两个空对象是不相等的。

Set实例的操作方法

Set有四个主要的操作方法:add()、delete()、has()、clear()

  • add(value)为Set添加某个值,返回set本身
  • delete(value)删除Set中的某个值,返回一个布尔值,说明删除是否成功
  • has(value)返回一个布尔值,说明Set中是否存在某个值
  • clear()清除Set中的所有值

Set的遍历方法

  1. keys() 遍历Set的键名
  2. values() 遍历Set的键值
  3. entries() 遍历Set的键值对
  4. forEach() 调用回调函数遍历Set的每个成员

因为keys、values、entries返回的都是迭代器,所以无法直接得到键名或键值,如果想要获得键名或键值,我们可以使用for…of

代码语言:javascript
复制

let a=new Set([2,3,4,5,6,6,8,NaN,NaN,{},{}])
for(let i of a.keys()){
    console.log(i)
}

Set方法的应用

数组去重

代码语言:javascript
复制

let change=function (arr){
    return Array.from(new Set(arr))
}
change([1,1,2,4,4,6])
代码语言:javascript
复制

let set=new Set();
[1,2,3,4,4].forEach(x=>set.add(x))//会去重
console.log(set)
  1. 修改Set中的值 首先我们需要了解如何将Set转为数组?

=>使用扩展运算符…

代码语言:javascript
复制

let a=new Set([2,3,4,5,6,6,8,NaN,NaN,{},{}])
console.log(a)//  Set(9) { 2, 3, 4, 5, 6, 8, NaN, {}, {} }
console.log([...a])   //[2, 3, 4, 5, 6, 8, NaN, {}, {}]

然后我们试着利用Set和map来修改Set中的值

代码语言:javascript
复制

let b=new Set([1,1,3,4,5,5,6,8])
let c=new Set([...b].map(x=>x*2))
console.log(c) // Set(6) { 2, 6, 8, 10, 12, 16 }

WeakSet的使用其实和Set比较类似,他们的区别主要有两个:

  1. WeakSet的成员只能是对象,而不是能是别的类型的值
  2. WeakSet的对象都是弱引用,不能遍历

什么叫弱引用呢,就是如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。

WeakSet有三个方法:

  1. add(value) 增加某个值
  2. delete(value) 删除某个值
  3. has(value) 判断某个值是否存在

因为WeakSet不可遍历,WeakSet没有size属性,没有forEach方法。

关于Set的用法可以参考这篇博客:

【javaScript】之Set的用法_qwerty053的博客-CSDN博客

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-02-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简单介绍
  • Set实例的操作方法
  • Set的遍历方法
  • Set方法的应用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档