当前位置：首页 > news >正文

Set和weakSet Map和WeakMap

news 2025/6/25 8:00:05

Set和weakSet的用法和区别

1.Set 和weakSet 它是类似于数组，且成员值都是唯一的，
2.Set有 add has delete clear size keys values forEach entries
3.weakSet 有add has delete
4.WeakSet中只能存放对象类型，不能存放基本类型
5.WeakSet它是弱引用，在weakSet里面引用了对象，垃圾回收机制不会考虑该对象的引用，若外面已经没有了该对象的引用，则垃圾回收机制会回收该对象，weakSet内部引用的该对象也会自动消失，所以他内部的对象不适合被引用，也不允许便利，
6.WeakSet在初始化的时候是不能赋值的，必须通过add赋值
7.WeakSet只有add has delete 没有size clear forEach不能使用for of进行便利。

// 普通的对象 如果把一个对象放入到数组中，那么只要这个数组存在，那么这个对象也就存在，即使没有其他对该对象的引用。
let john = { name: "John" };
let array = [ john ];
john = null; // 覆盖引用
console.log(array[0]) // 还是可以访问// Set，如果我们使用对象作为常规 Map 的键，那么当 Map 存在时，该对象也将存在。它会占用内存，并且应该不会被（垃圾回收机制）回收
const set = new Set()
let obj = {name:100}
set.add(obj)
obj = null
console.log(set.size)  // 1
// 它是伪数组 通过 ...变成数组对象  
// 他不会被垃圾回收机制回收，依旧可以访问获取 
console.log([...set][0]); // weakSet
const weakSet = new WeakSet()
let objWeak = {name:234}
let mary = { name: "Mary" };weakSet.add(objWeak)
weakSet.add(mary)
console.log(weakSet.has(objWeak)); // true
objWeak = null 
//若外面已经没有了该对象的引用，则垃圾回收机制会回收该对象，weakSet内部引用的该对象也会自动消失
console.log(weakSet.has(objWeak)); // false 将被自动清理(即自动清除其中已失效的值objWeak)

Map和weakMap

1.Map : set get has delete clear size keys values forEach entries
2.Map是一组键直对的数据局结构，我们知道普通的对象，他的key只能是字符串类型的，但是Map他的key不限制于字符串，可以是函数可以是对象包含任何类型
entries: 键直对所组成的数组
3.数组转map 传二维数组
4.weakMap：也是若引用，只接受对象类型的数据作为键名weakMap是对于键名引用的弱引用，不是键值指向的对象，键值的引用依然存在，
5.他有 get set has delete属性他也不能被遍历

//普通对象：
let [a, b] = [{}, {}]
let obj = {[a]: 1,[b]: 2,
}
console.log(obj.a); // undefiend  
console.log(obj.b); // undefiend   普通对象他的key是没法获取的，
// 最后是这样转换了 [object Object]的字符串，且下面的会覆盖上面的 {[object Object] : 2}
console.log(Object.prototype.toString.call(a)); // Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]])
map.get('a') // 1
map.has('a') // true// 获取key和value的数组
for (let i of map.entries()) {console.log(i);// ['a',1]// ['b',2]// ['c',3]
}weakMap的使用方式 ：比如获取dom的点击事件在不用weakMap之前：
```javascript
var count = 0, button = document.getElementById('btn');
function buttonClick() {count += 1console.log(count);
}
button.addEventListener('click', buttonClick) 
// 如果这个点击事件用完之后，或者离开当前页面需要销毁  我们需要
button.removeEventListener('click', buttonClick)
button = null 
count = null
// 这样的销毁的方法比较不友好，而且当变量多了，很容易遗漏

使用weakMap之后

var button = document.getElementById('btn'), wm = new WeakMap();
wm.set(button, { count: 0 })
function buttonClick() {let data = wm.get(button)data.count += 1console.log(data.count);
}
button.addEventListener('click', buttonClick) 
button.removeEventListener('click', buttonClick)
// 这个时候不需要额外的去关注状态
button = null