企业的门户网站一般用什么做,酒店网站建设范文,东莞证券手机app下载安装,wps连接wordpress目录 Set的基本使用WeakSet 使用Set 和 WeakSet 区别内存泄漏示例#xff1a;使用普通 Set 保存 DOM 节点如何避免这个内存泄漏MapWeakMap 的使用 Set的基本使用 在ES6之前#xff0c;我们存储数据的结构主要有两种#xff1a;数组、对象。 在ES6中新增了另外两种数据结构使用普通 Set 保存 DOM 节点如何避免这个内存泄漏MapWeakMap 的使用 Set的基本使用 在ES6之前我们存储数据的结构主要有两种数组、对象。 在ES6中新增了另外两种数据结构Set、Map以及它们的另外形式WeakSet、WeakMap Set是一个新增的数据结构可以用来保存数据类似于数组但是和数组的区别是元素不能重复。 Code const set new Set([1, 2, 3, 4, 4]);
console.log(set) // Set(4) {1, 2, 3, 4}const set2 new Set()
const arr [2,3,4,5,5,5,8,8]
arr.forEach((item){set2.add(item)
})
for(let item of set2) {console.log(item) // 2 3 4 5 8
}const set3 new Set([2,32,3,23,23,23,2,32,3,23])
for(let item of set3) {console.log(item) //2 32 3 23
}
const NewArr [...set3]
const NewArr2 Array.from(set3)
console.log(NewArr) //[ 2, 32, 3, 23 ]
console.log(NewArr2) //[ 2, 32, 3, 23 ]set 属性 Code
const set4 new Set([2,32,3,23,23,12312])
set4.add(55)
console.log(set4)
console.log(set4.has(55))
set4.delete(55)
console.log(set4.has(55))
const set5 new Set()
set4.forEach((item){item item*2set5.add(item)
})
console.log(set4)
console.log(set5)
set4.clear()
WeakSet 使用 和Set类似的另外一个数据结构称之为WeakSet也是内部元素不能重复的数据结构。 和Set区别 区别一WeakSet中只能存放对象类型不能存放基本数据类型 区别二WeakSet对元素的引用是弱引用如果没有其他引用对某个对象进行引用那么GC可以对该对象进行回收 code Code
let hd {name:houdunren}
let edu hd;
// 此时我们引用了俩次该内存地址引用次数为2
let set6 new WeakSet();
set6.add(hd)
// 再将该内存地址的数据加入WeakSet类型中引用次数不会增加我们将这种方式成为弱引用类型,Set的迭代方法等等都无法使用
console.log(set6.has(hd));
// 如果此时我们将hd和edu清空,那么该内存地址的数据将会被当作垃圾处理
hd null;
edu null;
// 而此时WeakSet中还是会认为有数据
console.log(set6.has(hd));Set 和 WeakSet 区别
非常详细,好好读 Set 以及 WeakSet 区别以及用法
在 JavaScript 中使用 WeakSet 来保存 DOM 节点确实可以减少内存泄漏的风险因为 WeakSet 存储的是对象的弱引用当对象没有被其他地方引用时可以被垃圾回收。然而如果错误地使用普通 Set 来保存 DOM 节点就可能造成内存泄漏。以下是一个例子
内存泄漏示例使用普通 Set 保存 DOM 节点
div idcontainer!-- 动态创建的按钮将被添加到此容器中 --
/div
button idaddBtn添加按钮/button
script// 获取容器和添加按钮的 DOM 元素let container document.getElementById(container);let addBtn document.getElementById(addBtn);// 创建一个 Set 来保存按钮的引用let buttonsSet new Set();// 为添加按钮添加点击事件监听器addBtn.addEventListener(click, function() {// 创建一个新的按钮let newBtn document.createElement(button);newBtn.textContent 新按钮;// 将新按钮添加到页面和 Set 中container.appendChild(newBtn);buttonsSet.add(newBtn); // 这里使用 Set 保存了对 DOM 元素的强引用// 如果不手动删除这些按钮它们会一直被 Set 强引用即使页面上已经没有这些按钮了});
/script在这个例子中每次点击 “添加按钮” 时都会创建一个新的按钮并将其添加到页面上。 同时这个新按钮的引用也被添加到了 buttonsSet 这个 Set 对象中。 由于 Set 存储的是强引用即使这些按钮从 DOM 中移除 只要它们还在 Set 中它们就不会被垃圾回收器回收从而导致内存泄漏。
如何避免这个内存泄漏
使用 WeakSet 替代 Set如果使用 WeakSet 来存储按钮的引用那么当按钮从 DOM 中移除后没有其他地方引用它们时它们就可以被垃圾回收。手动管理引用在不再需要按钮时应该从 Set 中删除对应的引用并从 DOM 中移除按钮。移除事件监听器在按钮从 DOM 中移除时也应该移除所有附加的事件监听器。使用一次性函数如果事件监听器只需要执行一次可以在执行完后立即删除它避免长期持有 DOM 元素的引用。
以下是使用 WeakSet 避免内存泄漏的修正代码
// 使用 WeakSet 而不是 Set 来保存按钮的引用
let buttonsWeakSet new WeakSet();addBtn.addEventListener(click, function() {let newBtn document.createElement(button);newBtn.textContent 新按钮;container.appendChild(newBtn);buttonsWeakSet.add(newBtn); // 使用 WeakSet 保存对 DOM 元素的弱引用// 添加按钮移除逻辑例如 (手动清理, 可以不加 )newBtn.addEventListener(click, function() {container.removeChild(newBtn);buttonsWeakSet.delete(newBtn); // 从 WeakSet 中删除引用});
});在这个修正后的代码中使用 WeakSet 来存储按钮的引用 当按钮不再出现在页面上时它们可以自动被垃圾回收 因为 WeakSet 中的引用不会阻止这一过程。
Map Map 实例的遍历方法有 keys()返回键名的遍历器。 values()返回键值的遍历器。 entries()返回所有成员的遍历器。 forEach()遍历 Map 的所有成员
const map new Map();
map.set(aaa, 100);
map.set(bbb, 200);for (let key of map.keys()) {console.log(key);
}
// aaa
// bbbfor (let value of map.values()) {console.log(value);
}
// 100
// 200for (let item of map.entries()) {console.log(item[0], item[1]);
}
// aaa 100
// bbb 200// 或者
for (let [key, value] of map.entries()) {console.log(key, value);
}
// aaa 100
// bbb 200 WeakMap 的使用 和Map类型的另外一个数据结构称之为WeakMap也是以键值对的形式存在的。 总结 汇总
