一、前言
Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构
什么是集合？什么又是字典？
集合是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合
字典是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同
区别？
共同点：集合、字典都可以存储不重复的值
不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储
下面对这两种数据结构进行详解
二、Set
1.Set数据结构定义
用于存储任何类型的唯一值，无论是基本类型还是对象引用。
2.Set数据结构的特性
(1) 只能保存值没有键名
(2) 严格类型检测如字符串数字不等于数值型数字
(3) 值是唯一的
(4) 遍历顺序是添加的顺序，方便保存回调函数
3.Set数据结构的基本使用
(1) add: 添加元素
使用 add 添加元素，不允许重复添加相同的值
let set = new Set() set.add(1).add(1).add(1); console.log(set.values()); // [1]
Set严格区分值类型 1 和 '1' 属于两个不同的值
let set = new Set(); set.add(1); set.add('1'); console.log(set.values()); // [1,'1']
(2) has: 检测元素是否存在,返回布尔值，存在返回 true
let set = new Set(); set.add(1); set.add('1'); console.log(set.values()); // [1,'1']
(3) size 返回 Set 长度
let set = new Set(['zs', 'lisi']); console.log(set.size); // 2
(4) delete: 删除单个元素方法,返回值为boolean类型
let set = new Set(['zs', 'lisi']); set.delete('zs'); console.log(set.values()); // ['lisi']
(5) clear: 清空所有成员，没有返回值
let set = new Set(['zs', 'lisi']); set.clear(); console.log(set.values()); // []
(6) 数组转换
可以使用 点语法 或 Array.form 静态方法将Set类型转为数组，这样就可以使用数组处理函数了
let set = new Set(['zs', 'lisi']); console.log([...set]); // ['zs', 'lisi'] console.log(Array.from(set)); // ['zs', 'lisi']
4.Set遍历数据
(1). forEach()：使用回调函数遍历每个成员
let set = new Set(['zs', 'lisi']) set.forEach((item, index) => { console.log(item, index); // zs zs lisi lisi });
(2). keys()：返回键名的遍历器
let set = new Set(['zs', 'lisi']); for (let i of set.keys()) { console.log(i); // zs lisi }
(3). values()：返回键值的遍历器
let set = new Set(['zs', 'lisi']); for (let i of set.values()) { console.log(i); // zs lisi }
(4) entries()：返回键值对的遍历器
let set = new Set(['zs', 'lisi']); for (let i of set.entries()) { console.log(i); // ['zs','zs'] ['lisi','lisi'] }
5.Set 的使用场景
(1). 利用Set实现去重
实现字符串去重
let str = 'helloworld'; console.log([...new Set(str)]); // ['h', 'e', 'l', 'o', 'w', 'r', 'd']
实现数组去重
let arr = [1, 2, 3, 4, 1, 2]; console.log([...new Set(arr)]); // [1, 2, 3, 4]
(2).实现并集，交集，差集
let a = new Set([1, 2, 3]); let b = new Set([2, 3, 4]); // 并集 let bingji = new Set([...a, ...b]); console.log(bingji.values()); // [1,2,3,4] // 交集 let jiaoji = new Set([...a].filter((x) => b.has(x))); console.log(jiaoji.values()); // [2,3] // （a 相对于 b 的）差集 let chaji = new Set([...a].filter((x) => !b.has(x))); console.log(chaji.values()); // [1]
6.WeakSet的使用
WeakSet结构同样不会存储重复的值，它的成员必须只能是对象类型的值
WeakSet的特性
(1). 垃圾回收不考虑WeakSet，即被WeakSet引用时引用计数器不加一，所以对象不被引用时不管WeakSet是否在使用都将删除
(2). 因为WeakSet 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行forEach( )遍历等操作
(3). 也是因为弱引用，WeakSet 结构没有keys( )，values( )，entries( )等方法和size属性
(4). 因为是弱引用所以当外部引用删除时，希望自动删除数据时使用 WeakSet
(5). WeakSet没有size属性
(1) WeakSet的值必须为对象类型,若为其他类型会报错
// 正确声明 let weakSet = new WeakSet([ [1, 2], [3, 4], ]); // 错误声明 let weakSet1 = new WeakSet([1, 2]); // Invalid value used in weak set
(2) 当使用WeakSet保存 DOM 节点时，当DOM节点删除时，WeakSet会自动删除对DOM节点的引用，不用担心dom节点从文档中移除产生内存泄漏的问题
7.垃圾回收机制
WeaSet保存的对象不会增加引用计数器，如果一个对象不被引用了会自动删除。
let set = new WeakSet(); let arr = ['zs', 'lisi']; set.add(arr, 123); arr = null; console.log(set); setTimeout(() => { console.log(set); }, 1000);
三、Map
1.Map数据结构定义
Map是一组键值对的结构，用于解决以往不能用对象做为键的问题
2.Map数据结构的特性
(1) 具有极快的查找速度
(2) 函数、对象、基本类型都可以作为键或值
3.Map数据结构的基本使用
(1) set 添加元素,支持链式操作
let map = new Map([]); map.set('name', 'zs'); map.set('age', '18'); map.set('hobby', [1, 2, 3]).set('a', 'b'); console.log(map);
(2).get 获取元素
let map = new Map([ ['name', 'zs'], ['age', 18], ]); console.log(map.get('name')); // 'zs'
(3).size 获取数量,返回map长度
let map = new Map([ ['name', 'zs'], ['age', 18], ]); console.log(map.size); // 2
(4).has 利用key值检测是否存在,返回布尔值，存在返回true
let map = new Map([ ['name', 'zs'], ['age', 18], ]); console.log(map.has('name')); // true console.log(map.has('hobby')); // false
(5).delete方法 删除单个元素
let map = new Map([ ['name', 'zs'], ['age', 18], ]); map.delete('name'); console.log(map.has('name')); // false
(6).clear方法 清空map所有元素
let map = new Map([ ['name', 'zs'], ['age', 18], ]); map.clear('name'); console.log(map.size); // 0
(7).数据转换
可以使用 展开语法 或 Array.form 静态方法将Map类型转为数组，这样就可以使用数组处理函数了
let map = new Map([ ['name', 'zs'], ['age', 18], ]); console.log([...map]); console.log(Array.from(map));
4.Map遍历数据
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回所有成员的遍历器
forEach()：遍历 Map 的所有成员
let map = new Map([ ['name', 'zs'], ['age', 18], ]); map.forEach((value, key) => { console.log(key, value); // name zs // age 18 }); for (let i of map.keys()) { console.log(i); // name age } for (let value of map.values()) { console.log(value); // zs 18 } for (let entries of map.entries()) { console.log(entries); // ['name','zs'] ['age',18] } // 等同于上面的 map.entries() for (let [key, value] of map.entries()) { console.log(key, value); // name zs // age 18 }
5.Map的使用场景
(1) 当页面中有多个表单元素需要进行数据交互时，可以使用Map来存储表单数据
const formData = new Map(); formData.set('username', 'zs'); formData.set('password', '123456'); const username = formData.get('username'); //zs const password = formData.get('password'); //123456
通过使用Map来管理数据，可以使代码更加简洁和易于维护
6.WeakMap的使用
WeakMap 对象是一组键/值对的集
(1) 键名必须是对象
(2) WeaMap对键名是弱引用的，键值是正常引用
(3) 垃圾回收不考虑WeaMap的键名，不会改变引用计数器，键在其他地方不被引用时即删除
(4) 因为WeakMap 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行forEach( )遍历等操作
(5) 也是因为弱引用，WeaMap 结构没有keys( )，values( )，entries( )等方法和 size 属性
(6) 当键的外部引用删除时，希望自动删除数据时使用 WeakMap
(1) WeakMap的值必须为对象类型,若为其他类型会报错
let weakMap = new WeakMap(); // 正确声明 weakMap.set({ name: 'zs' }, 'lisi'); // 错误声明 weakMap.set(1, 2); // Invalid value used as weak map key // at WeakMap.set (<anonymous>) weakMap.set(null, 1); // Invalid value used as weak map key // at WeakMap.set (<anonymous>)
(2) 利用WeakMap 保存 DOM节点
<body> <div>zs</div> <div>lisi</div> </body> <script> const map = new WeakMap(); document.querySelectorAll('div').forEach((item) => map.set(item, item.innerHTML)); console.log(map); //WeakMap {div => "zs", div => "lisi"} </script>
7.垃圾回收
WakeMap的键名对象不会增加引用计数器，如果一个对象不被引用了会自动删除。
下例当 obj 删除时内存即清除，因为WeakMap是弱引用不会产生引用计数
let map = new WeakMap(); let obj = { name: 'zs' }; map.set(obj, 'zs'); obj = null; console.log(map); setTimeout(() => { console.log(map); }, 1000);
