es6的set map weakmap weakset以及js的内存泄漏

Set 和 Map

用于数据存储和数据重组。

简单介绍

• Set 集合

  类似于数组，但是成员是无序唯一的。既可以存储原始值，也可以存储对象引用。

  • 属性

    size, constructor

  • 方法

    add, delete, has, clear, keys, values, entries, forEach(callbackFn(value, key), thisArg)

  • 应用

    // 数组去重
    let arr = [1,2,3,2,1];
    [...new Set(arr)]; // [1,2,3]
    
    // 将Set结构转为数组的方法
    [...new Set([1,2,3])] // 1. 扩展运算符
    Array.from(new Set([1,2,3])) // 2. Array.from方法
    

• 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;
  }
}

什么是内存泄漏？

程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存。

对于持续进行的服务进程（daemon），必须及时释放内存，否则内存占用会越来越高，影响系统性能，直至进程崩溃。

所以，不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）

有些语言，比如C语言，必须手动释放内存，程序员负责内存管理。

char * buffer;
buffer = (char*) malloc(42);

// do sometjing with buffer

free(buffer);

上面是 C 语言代码，malloc方法用来申请内存，使用完毕之后，必须自己用free方法释放内存。

这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为“垃圾回收机制”（garbage collector）。

分析 JavaScript 代码的内存使用

timeline 图及 profile 图

名词解释：

• GC 垃圾回收：Garbage collection
• DOM GC DOM 气相色谱
• majory GC
• heap 堆
• GPU memery GPU 存储器
• timings 计时
• timeline 时间线
• call tree 调用数
• screen shots 屏幕截图

内存泄漏的场景

• 意外的全局变量

  function foo(arg) {
    bar = "this is a hidden global variable";
  }
  
  function foo() {
    this.variable = "potential accidental global";
  }
  foo();
  

  解决：'use strict;'

• 被遗忘的定时器器或回调

  
  var someResource = getData();
  setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
      // Do stuff with node and someResource.
      node.innerHTML = JSON.stringify(someResource));
    }
  }, 1000);
  
  var element = document.getElementById('button');
  function onClick(event) {
    element.innerHtml = 'text';
  }
  element.addEventListener('click', onClick);
  // Do stuff
  element.removeEventListener('click', onClick);
  element.parentNode.removeChild(element);
  // 现在，当元素超出范围，元素和onclick都将被回收
  

• 闭包

  var theThing = null;
  var replaceThing = function() {
    var originalThing = theThing;
    var unused = function() {
      if (originalThing) console.log("hi");
    };
  };
  setInterval(replaceThing, 1000);
  

垃圾回收机制

最常用的方法叫做“引用计数”（reference counting）： 语言引擎中有一张“引用表”，保存了内存里所有的资源的引用次数。如果一个值的引用次数是0，就表示这个值不再使用了，因此可以将这块内存释。

上图中，左下角的两个值，没有任何引用，所以可以释放。

如果一个值不再需要了，引用数却不为0，垃圾回收机制无法释放这块内存，从而导致内存泄漏。

const arr = [1,2,3,4];
console.log('hello');

上面代码中，数组[1, 2, 3, 4]是一个值，会占用内存。变量arr是仅有的对这个值的引用，因此引用次数为1。尽管后面的代码没有用到arr，它还是会持续占用内存。

如果增加一行代码，解除arr对[1, 2, 3, 4]引用，这块内存就可以被垃圾回收机制释放了。

let arr = [1,2,3,4];
console.log('hello');
arr = null;

上面代码中，arr重置为null，就解除了对[1, 2, 3, 4]的引用，引用次数变成了0，内存就可以释放出来了。

因此，并不是说有了垃圾回收机制，程序员就轻松了。你还是需要关注内存占用：那些很占空间的值，一旦不再用到，你必须检查是否还存在对它们的引用。如果是的话，就必须手动解除引用。

内存泄漏识别

怎样可以观察到内存泄漏呢？

经验法则是，如果连续五次垃圾回收之后，内存占用一次比一次大，就有内存泄漏。这就要求实时查看内存占用。

浏览器

Chrome浏览器查看内存占用情况，按以下步骤操作：

• 打开开发者工具，选择 Timeline 面板
• 在顶部的Capture字段里面勾选 Memory
• 点击左上角的录制按钮。
• 在页面上进行各种操作，模拟用户的使用情况。
• 一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况。

如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。

反之，就是内存泄漏了。

内存泄漏的解决

• 手动释放

  let arr = [1, 2, 3, 4]; // 尽管没有用到这个变量，但是变量arr对[1, 2, 3, 4]有引用，所以这个值不能得到释放
  arr = null; // 解除arr对值的引用，内存就会被释放了
  

• 使用弱引用：WeakSet 和 WeakMap

  const wm = new WeakMap();
  
  const element = document.getElementById("example");
  
  wm.set(element, "some information");
  wm.get(element); // "some information"
  

关于弱引用 weakmap

前面说过，及时清除引用非常重要。但是，你不可能记得那么多，有时候一疏忽就忘了，所以才有那么多内存泄漏。

最好能有一种方法，在新建引用的时候就声明，哪些引用必须手动清除，哪些引用可以不管，当引用消失以后，垃圾回收机制就可以释放内存了，这样就能大大减轻程序员的负担，你只要清除主要的引用就好了。

es6考虑到这点，退出了两种新的数据结构： weakset 和 weakmap 。他们对值的引用都是不计入垃圾回收机制的，所以名字里才会有一个weak，表示这个弱引用。

下面以 WeakMap 为例，看看它是怎么解决内存泄漏的。

const wm = new WeakMap();
const element = document.getElementById('example');
vm.set(element,'something');
vm.get(element);

上面代码中，先新建一个 Weakmap 实例。然后，将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对element的引用就是弱引用，不会被计入垃圾回收机制。

也就是说，DOM 节点对象的引用计数是1，而不是2。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。

基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。