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语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...
随机推荐
- react 异步的setState
import React from "react"; class App extends React.Component { state = { a: 0 }; component ...
- PAUL ADAMS ARCHITECT:爱丁堡的房屋价值创历史新高
近日,英国知名房产公司保罗·亚当斯公司根据一组调查报告表示,今年第三季度,爱丁堡的房价再创历史新高,并向大家分析了原因. 保罗·亚当斯公司(公司编号:07635831)是英国一家著名的房地产公司,总部 ...
- Zookeeper从入门到删库跑路
导语 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等.Zookeeper是hadoop的一个子项 ...
- ES6 声明变量的六种方法
ES5 只有两种声明变量的方法: var 命令和 function 命令. ES6 除了添加 let 和 const 命令, 后面章节还会提到, 另外两种声明变量的方法: import 命令和 cla ...
- ElasticSearch 搜索模板与建议
公号:码农充电站pro 主页:https://codeshellme.github.io Search APIs 用于搜索和聚合存储在 ES 中的数据. 1,搜索模板 Template Search ...
- JUnit5学习之四:按条件执行
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- Windows定时重新启动(适用于server 2012 r2)
直接看链接吧:https://jingyan.baidu.com/article/2d5afd69dd8e9d85a2e28eb7.html 开始菜单,找到"计划任务程序"; 2 ...
- CSS的定位布局(position)
定位 static(默认值) 没有开启定位 relative 相对定位的性质 包含块(containing block)概念 没有开启定位时包含块就是当前元素最近的祖先块元素 开启绝对定位后的元素包含 ...
- AXU2CGB开发板验证Vitis加速基本平台创建
Vitis 加速基本平台创建 1.Vivado 工程创建,硬件平台bd 图如下所示 1.1.双击Block图中ZYNQ核,配置相关参数 1.1.1.Low Speed 配置,在 I/O Configu ...
- mpvue 开发微信小程序搭建项目
首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vu ...