Set,Map的基本使用

纯荔枝ikun
157 阅读6分钟

Set 和 map的使用

在es6之前,我们存储数据的结构主要有两种,一种是数组,一种是对象

在es6中新增了另外两种数据结构:Set Map

数据结构: 就是存放数据的一种方式

image.png

在javascript 中使用最多的就是数组

对象的底层有点像 hashmap

将数据进行一种保存

一个叫做set,一种叫做map

一个叫做,WeatSet 一种叫做WeatMap

它们是两种数据结构

到底用来表达的是什么意思

原来的时候有哪些数据结构帮助我们保存数据

image.png

在Set构造函数中

可以用来保存数据,但是使用Set来保存数据,里面的值不能重复

这个是和数组的区别

如果不想要重复的数据,我们可以存放如set中

在Set中使用add添加数据

let list = [1, 2, 3, 4, 5, 6, 7, 7]

const LiSet = new Set();

for (let i = 0; i < list.length; i++) {
  LiSet.add(list[i])
}

console.log(LiSet.length)

在这里进行一个打印

image.png

在这里是创建出来两个对象,两个对象有不同的内存地址,保存的是不同的内容地址

image.png

比如说一组数组,不想要数据里面有重复的值

对于数组去除重复的元素

可以将数组放入到Set中(必须要是可以迭代的数组),这里重复的元素已经去除掉了

这里拿到的是数组结构

Array.from 使用Array.from()

Set 也是支持展开运算符的

Set 支持展开运算符

Set常用的方法

size 元素的个数

add() 进行元素的添加

delete() 删除元素

hash() 有没有包含元素

clear() 清除Set 里面的元素

使用foreach 对于里面的元素进行遍历

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

在这里使用set非常的简单

清除里面相同的元素

WeakSet的使用

image.png

WeakSet 只能存放对象类型(有点类似于ArrayList的数据结构)

这里的名字差不多的长

对于对象是弱引用

如果在里面不使用的话,GC就会回收掉

从我们全局的跟对象开始的话,就不会回收掉

let obj = {obj:'name'};

image.png

垃圾回收掉,如果没有引用的话,就会被GC回收掉

image.png

将里面的引用赋值为空,就会被GC垃圾回收期回收掉了

就是这样的一个过程

在GC准备回收的时候会认为这一条线,是有效的

弱引用 weak reference

image.png

强引用和弱引用的一些概念

保存一下这个图片

可以把一个对象放入到weakset是一个弱类型的引用

Set 会建立一个强引用,WeakSet 会建立一个弱引用

如果别的元素指向它,也是会删除的

这个就是WeakSet 和 Set的区别

这里只要知道这个引用就可以了

image.png

别的变量不指向了,就会被GC垃圾回收机制进行删除

image.png

在WeatSet 常见的方法

WeakSet 是不能进行遍历的

image.png

因为WeakSet只是对对象的弱引用,如果我们遍历获取到其中的元素有可能造成对象不正常的销毁

Stack OverFlow 有一个案例进行修改

在里面我们可以简单的打印一个runningj,我们在这里可以new 一个Person()

如果想要在里面调用running方法的话

在这里如果使用的是Set 的话,Set是一种强类型的绑定,也就是说就算赋值null 的话

在内存中也是不会被销毁的

image.png

weak就是弱引用的意思的

image.png

使用weakSet 的场景并不是很多

Map 的使用

image.png

对象存储的时候,只能存放字符串

只有一种数据类型 string

在对象中是不能使用对象来做key键的

(对象:value)

image.png

这里不是使用对象用来做对象的key键

而是使用object 的名字

后面的key 会把前面的key 进行覆盖掉

是不能使用对象用来作为key的

Map 类型支持对象类型作为key,这个就是Map,可以使用本身的一些数据类型直接

作为key,也可以通过key 来获取value

image.png

可以使用其他的数据类型用来作为key来进行使用

这个里面存放的是数组,但是在Map里面依然存放的是数组,在每个小的里面存放的也是

字符串

image.png

使用Object

这个其实是一个entrys进行使用

image.png

使用set方法来向Map里面填入一个键值对

map2.set("why","eee")

这里就是一个Set

这里使用Set将数据填入进去

使用get 通过get来取value值

这里是可以获取到这样的111的

has 方法

这里可以使用delete

这里的delete 会有返回值的

如果这里key值是重复的话,会将重复的数据筛除

clear() 将数据进行删除

遍历map

也是可以通过 forEach 来进行遍历的

如果打印最近的一个值的话,可以使用

item,key

在这里也支持

for of

如果想要在里面获取到值的时候,可以在遍历的同时做一个结构

可以对于这个数组进行结构

讲完map 的使用过程

image.png

map 可以使用forEach来使用

WeakMap

和WeakSet是一样的

WeakMap里面只能存放对象

image.png

这里的引用是弱引用,只要别人没有引用的时候 就会被GC垃圾回收机制进行回收

如果使用的是obj来进行书写的话

image.png

这里是区别一

第二个是只能是对象,不能使用基本数据类型

这个是一个方法

这里是没有size 方法

这里有delete 方法

image.png

这里的WeakMap 是不能进行遍历的,在这里调用toString方法的时候,打印的是一个字符串

这里也是转换成一个字符串打印的形式

这里的WeakMap是不能进行遍历的,所以无法显示出来

简单的响应式的原理

如果我们对象中的数据发生改变的话,就会立即执行其他的函数

image.png

在vue中返回的是一个data的对象

当对象发生改变的时候,里面的数据也会发生改变

这个是其他的组件

当里面的值发生改变的时候,就会使用里面最新的name

生成最新的VNode -> 生成diff算法 -> 渲染到页面上

如果这里的数值发生改变的时候,就会重新执行比如说(reder函数)

当数据发生改变的时候,里面的内容就会发生改变

所以说,类似于这样的一个项目,通过某种数据结构关联在一起

image.png

设置这样的一种映射关系

image.png

这个是对于obj1的收集

收集obj1里面的数据结构

对于数据进行一个监听的操作,如果数据发生了改变的时候,就会对于数据进行处理

obj1.name = '123'

image.png

所以这个就是响应式的数据保存结果

如果某一个数据发生改变的时候,执行对应的方法

对于数据进行一层映射的关系,但是不响应本身的索引

ES7 Array Includes

非常不常用的方法

了解真相,可以知道它怎么去使用

2016 和 2015 中进行一个非常大的更迭

await 关键字,async 关键字

这里知道这些东西,最主要知道两个东西

在ES7 之前,如果我们想要判断一个数组中是否包含某个元素,需要通过indexof 获取结果,并且判断是-1

在数组是否包含使用的是 indexof

array.includes() 方法

includes 里面传入的值是判断是否包含

第二个是从第几个索引值开始

在数组中是不能判断NaN的

image.png

includes 可以对于NaN 进行一个判断,是否包含

ES7 指数运算符

image.png

可以进行一个运算

原先的使用是pow 进行指数的运算

现在可以使用 ** 来进行指数的运算

后面在讲promise的时候才会执行

avatar
文章
阅读
粉丝