20190225 React中key的作用+防抖节流+ Set Map

WeakSet 弱引用Set

与Set的区别

只能存储对象引用，不能存放值
• WeakSet对象中储存的对象值都是被弱引用的，即垃圾回收机制不考虑WeakSet 对该对象的引用，如果没有其他的变量或属性引用这个对象值，则这个对象将会被垃圾回收掉，所以，WeakSet 对象里有多少个成员元素，取决于垃圾回收机制有没有运行，运行前后成员个数可能不一致，遍历结束之后，有的成员可能取不到了（被垃圾回收了，所以 WeakSet 对象是无法被遍历的，也拿不到它包含的所有元素。

属性

constructor

方法

add, delete, has, clear

Map 字典

与Set的异同

共同点：存储的值都是唯一的
• 不同点：Set是以[value, value]的形式存储数据，而Map是以[key, value]的形式存储数据。

属性

constructor, size

方法

set, get, has, delete, clear, keys, valus, entries, forEach

WeakMap 弱引用Map

与Map的区别

键必须是对象，而值可以是任意
• 键是弱引用的，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakMap 的 key 是不可枚举的。

属性

constructor

方法

set, get, has, delete

总结

Set

成员唯一、无序且不重复
• [value, value]，只有键值，没有键名
• 可以遍历

WeakSet

成员都是对象
• 成员都是弱引用，键值所指的对象可以被垃圾回收（可以用来保存DOM节点，不容易造成内存泄漏）
• 不能遍历

Map

成员唯一、无序且不重复
• [key, value]，有键值，有键名
• 可以遍历

WeakMap

键名必须是对象（null除外）
• 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
• 不能遍历

关于弱引用

弱引用可以防止在 DOM节点或事件处理程序 与其关联的对象(例如闭包)之间存在引用循环时浏览器(通常是IE，特别是旧版本)的内存泄漏。

介绍

弱引用：在计算机程序设计语言中，弱引用和强引用相对，它是指不能确保其引用的对象不会被垃圾回收机制回收的引用。一个对象若只被弱引用引用，则认为是不可访问的或者弱访问的，因此他随时可能会被回收。

在js中，一般创建一个对象，都是建立一个强引用：

var obj = new Object();

只有当obj = null时，才有可能回收obj 所引用的对象。

而如果我们能创建一个弱引用的对象：

// 假设可以这样创建一个
var obj = new WeakObject();

我们什么都不用做，就静静的等待垃圾回收执行，obj所指向的对象就可以被回收。

结合WeakMap说明弱引用

WeakMap 保持了对键名所引用对象的弱引用

正常情况下：

const key = new Array(4);
const arr = [ [key, 1] ];

使用这种方式，其实我们是创建了一个arr对key引用的对象的强引用。

当key = null时，只是去掉了key对obj的强引用，并没有去除arr对obj的强引用，所以obj还是不会被回收。

这时候就说到WeakMap了：

const key = new Array(4);
var arr = new WeakMap();
arr.set(key, 'object');

使用这种方式，其实我们是创建了一个arr对key引用的对象的弱引用。

当key = null时，去掉了key对obj的强引用，只剩下arr对obj的弱引用，下次垃圾回收时，该引用对象就会被回收了。

弱引用的应用

在DOM对象上保存相关的数据：

var element = document.querySelector('.element');
var wm = new WeakMap();
wm.set(element, 'data');

let value = wm.get(elemet);
console.log(value); // data

element.parentNode.removeChild(element);
element = null;

数据缓存：

const cache = new WeakMap();
function countOwnKeys(obj) {
if(cache.has(obj)) {
console.log('cached');
cache.get(obj);
}else {
console.log('computed');
const count = Object.keys(obj).length;
cache.set(obj, count);
return count;
}
}