JavaScript深入理解-Set、Map、WeakSet和WeakMap
Set
Set 对象允许储存任何类型的唯一值,无论是原始值或者是对象引用
本质:构造函数,用来生成 Set 数据结构
描述
Set 对象是值的集合,你可以按照插入的顺序迭代它的元素。Set 中的元素只会出现一次,即 Set 元素是唯一的。
相当于集合,可以进行并集交集运算。
值的相等
对于原始数据类型(boolean,number,string,null,undefined),如果储存相同值则只保存一个,对于引用类型,引用地址完全相同则只会存一个。
- +0 与-0 在存储判断唯一性的时候是恒等的,所以不可以重复。
- undefined 和 undefined 是恒等的,所以不可以重复。
- NaN 与 NaN 是不恒等的,但是在 Set 中只能存一个不能重复。
属性方法
- size 属性:返回集合元素个数(类似于数组的长度 length)
- add(value)方法:想集合中添加一个元素。如果添加的元素已存在,则不会进行操作。
- delete(value)方法:从集合中删除元素 value
- has(value)方法:判断 value 是否在合集中,返回 true 或者 false
- clear()方法:清空集合
- forEach()方法:根据集合中元素的插入顺序,依次执行提供的回调函数
应用场景
数组去重,交集,并集,差集等等
//数组去重
...new Set([1,1,2,2,3])
//并集
let arr1 = [1, 2, 3]
let arr2 = [2, 3, 4]
let newArr = [...new Set([...arr1, ...arr2])]
//交集
let arr1 = [1, 2, 3]
let arr2 = [2, 3, 4]
let set1 = new Set(arr1)
let set2 = new Set(arr2)
let newArr = []
set1.forEach(item => {
set2.has(item) ? newArr.push(item) : ''
})
console.log(newArr)
//差集
let arr1 = [1, 2, 3]
let arr2 = [2, 3, 4]
let set1 = new Set(arr1)
let set2 = new Set(arr2)
let newArr = []
set1.forEach(item => {
set2.has(item) ? '' : newArr.push(item)
})
set2.forEach(item => {
set1.has(item) ? '' : newArr.push(item)
})
console.log(newArr)
Map
Map 对象保存键值对,并且能够记住键的原始插入顺序,任何值(对象或者原始值)都可以左右一个键或者一个值
描述:
一个 Map 对象在迭代时会根据对象中元素的插入顺序来进行,一个
for of循环在每次迭代后会返回一个形式为[key,value]的数组
键的相等
对于原始数据类型(boolean,number,string,null,undefined),如果储存相同值则只保存一个,对于引用类型,引用地址完全相同则只会存一个。
- +0 与-0 在存储判断唯一性的时候是恒等的,所以不可以重复。
- undefined 和 undefined 是恒等的,所以不可以重复。
- NaN 与 NaN 是不恒等的,但是只能存一个不能重复。
Map 和 Object 的区别
| Map | Object | |
|---|---|---|
| 额外的键 | Map 默认情况下不包含任何键,只包含插入的键 | 一个 Object 有一个原型,原型链上的键名有可能和自己在对象上设置的键名产生冲突,ES5 可以适用 Object.create(null),创建一个没有原型的对象 |
| 键的类型 | 一个 Map 的键可以是任意值,包括函数,对象或者任意基本类型 | 一个 Object 的键必需是一个 String 或者 Symbol |
| 键的顺序 | Map 中的 key 是有序的,因此当迭代的时候,一个 Map 对象以插入的顺序返回键值 | 一个 Object 的键是无序的 |
| Size | 通过 size 属性获取 | Objec 的键值只能手动计算 |
| 迭代 | 可迭代,可以直接被迭代 | 需要某种方式获取到键才能被迭代 |
| 性能 | 在频繁增删键值对的场景下表现更好 | 未作出优化 |
属性方法
- size 属性:返回字典长度(类似于数组的长度 length)
- values()方法:返回一个可迭代对象,包含按顺序插入 Map 对象中每个元素的 value 值
- set(key,value)方法:向字典中添加新元素
- get(key)方法:通过键查找特定数值并返回
- has(key)方法:判断字典中是否存在键 key
- delete(key)方法:通过键 key 从字典中移出对应的数据
- clear()方法:清空字典
- forEach()方法:根据集合中元素的插入顺序,依次执行提供的回调函数
遍历
var myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");
for (const [key, value] of myMap) {
console.log(key, value);
}
myMap.forEach((value, key) => {
console.log(value, key);
});
转换
var arr = [
[1, 2],
[3, 4],
[5, 6],
];
var map = new Map(arr);
console.log(map); //Map { 1 => 2, 3 => 4, 5 => 6 }
console.log(Array.from(map)); //[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]
复制
let mapV=newMap(map)
WeakSet
WeakSet 对象允许将弱引用对象存在一个集合中
WeakSet 和 Set 区别:
- WeakSet 只能储存对象引用,不能存放值,而 Set 对象都可以
- WeakSet 对象中储存的对象值都是被弱引用的,即垃圾回收机制不考虑 WeakSet 对该对象的引用,如果没有其他的变量或者属性引用这个对象值,则这个对象将会被垃圾回收掉。(不考虑该对象还存在与 WeakSet 中),所以 WeakSet 对象里有多少个成员元素,取决于垃圾回收机制有没有运行,运行前后成员个数可能不一致,遍历结束之后,有的成员可能取不到,被垃圾回收了。因此 ES6 规定,WeakSet 对象是无法被遍历的,也没有办法拿到它包含的所有元素。
属性:
constructor:构造函数
方法:
- add(value)方法:在 WeakSet 中添加一个元素。如果添加的元素已存在,则不会进行操作。
- delete(value)方法:删除元素 value
- has(value)方法:判断 WeakSet 对象中是否包含 value
- clear()方法:清空所有元素
WeakMap
WeakMap 对象是一组键值得集合,其中的键是弱引用。注意:键必需是弱引用,而值可以是任意。
注意:WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。
WeakMap 和 Map 区别:
WeakMap 中,每个键对自己所引用对象的引用都是弱引用,在没有其他引用和该键引用同一对象,这个对象将会被垃圾回收,相对应的 key 则变成无效的,所以,WeakSet 的 key 是不可枚举的。
属性:
constructor:构造函数
方法:
- set(key,value)方法:设置一组 key 关联对象
- delete(key)方法:移出 key 的关联对象
- has(value)方法:判断 WeakSet 对象中是否包含 value
- get(key)方法:返回 key 关联对象,没有则返回 undefined
总结
- Set
- 成员唯一,无序且不会重复
- 类似于数组集合,键值和键名是一致的(只有键值。没有键名)
- 可以遍历,方法有 add,delete,has
- WeakSet
- 只能存储对应引用,不能存放值
- 成员都是弱引用,会被垃圾回收机制回收
- 不能遍历,方法有 add,delete,has
- Map
- 键名唯一不可重复
- 类似于集合,键值对的集合,任何值都可以作为一个键或者一个值
- 可以遍历,可以转换各种数据格式,方法 get,set,has,delet
- WeakMap
- 只接受对象为键名,不接受其他类型的值作为键名,键值可以是任意
- 键名是拖引用,键名所指向的对象,会被垃圾回收机制回收
- 不能遍历,方法 get,set,has,delete
JavaScript深入理解-Set、Map、WeakSet和WeakMap的更多相关文章
- SE6新特性之集合Set、Map、WeakSet和WeakMap详解
SE5的时候我们经常用数组或者类数组对象来操作数据,而对于一些使用惯了java之类语言的集合的开发人员来说,总有少了点什么的感觉,SE6提供Set和Map这两个集合.不仅从根本上为一些问题提供了解决方 ...
- es6学习笔记--新数据结构Set,Map以及WeakSet,WeakMap
在javascript中,存储数据的方式大部分就是以数组或者对象形式存储的,es6出现了4种新集合Set,Map,WeakSet,WeakMap来存储数据,简化了编程. 集合--Set 类似于数组,但 ...
- Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...
- 第一百二十九节,JavaScript,理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- 《javascript个人理解,个人整理。》
万事开头难. 本人做前端工程师,已几年,没有特别大的,已文字方式去做总结. 前段时间,早已经想好,但是迟迟没有去下笔!好在现在陆陆续续的写下去. 我知道这是一个很大的工程,但是我还是想做下去,不为别的 ...
- 百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
- 【转】Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...
- JavaScript深入理解sort()方法
一. 基本用法 let arr1 = [3, 5, 7, 1, 8, 7, 10, 20, 19] console.log(arr1.sort()) // [1, 10, 19, 20, 3, 5, ...
- javascript深入理解js闭包(转)
javascript深入理解js闭包 转载 2010-07-03 作者: 我要评论 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...
随机推荐
- 人物传记STEPHEN LITAN:去中心化存储是Web3.0生态重要组成
近期,NGK.IO的开发团队首席技术官STEPHEN LITAN分享了自己对去中心化储存的观点,以下为分享内容. 目前的存储方式主要是集中式存储,随着数据规模和复杂度的迅速增加,集中存储的数据对于系统 ...
- JMM内存模型相关笔记整理
JMM 内存模型是围绕并发编程中原子性.可见性.有序性三个特征来建立的 原子性:就是说一个操作不能被打断,要么执行完要么不执行,类似事务操作,Java 基本类型数据的访问大都是原子操作,long 和 ...
- [转]百度Appollo无人车Perception Module 分析
https://github.com/ApolloAuto/apollo/blob/master/docs/howto/modules/apollo1.5_perception_module_stud ...
- 微信小程序(二十)-UI组件(Vant Weapp)-02使用
1.按钮使用 https://vant-contrib.gitee.io/vant-weapp/#/button 1.全局引入,在app.json中引入组件 "usingComponents ...
- IntelliJ Idea Error Address localhost 1099 is already in use.
Reference: https://stackoverflow.com/questions/38986910/intellij-idea-address-localhost1099-is-a ...
- docker方式部署禅道
一.概述 使用docker方式部署禅道简单,快速,不容易出错.比起编译安装要方便很多. 二.部署 环境说明 操作系统:centos 7.6 ip地址:10.212.82.65 docker版本:19. ...
- linux的0,1,2号进程
一.答案 https://blog.csdn.net/gatieme/article/details/51532804 仔细读一下作者的博客,都是操作系统底层相关. 二.补充: 1.linux代码,a ...
- SpringBoot(八):SpringBoot中配置字符编码 Springboot中文乱码处理
SpringBoot中配置字符编码一共有两种方式 方式一: 使用传统的Spring提供的字符编码过滤器(和第二种比较,此方式复杂,由于时间原因这里先不介绍了,后续补上) 方式二(推荐使用) 在appl ...
- go http库 设置代理
func ProxyTest() { proxyAddr := "http://your IP:8080/" httpUrl := "http://your target ...
- AOP面试造火箭始末
本文已整理致我的github地址,欢迎大家 star 支持一下 这是一个困扰我司由来已久的难题,Dubbo 了解过吧,对外提供的服务可能有多个方法,一般我们为了不给调用方埋坑,会在每个方法里把所有异常 ...