彻底搞懂WeakMap和Map

好好吃饭好好睡觉
966 阅读9分钟

😁今天说一下 Map,WeakMap

image.png

  • 要搞懂weakMap之前，我们肯定要先搞定Map

一 、Map

Map是一种叫做字典的数据结构，Map 对象保存不重复键值对，并且能够记住键的原始插入顺序

  • Map的属性和方法
    • 属性： size： 返回所包含的键值对长度
    • 操作方法：
      • set(key,val): 添加新键值对
      • get(key): 通过传入键查找并返回对应值
      • has(key): 判断是否存在该键
      • delete(key)：删除该键值对
      • clear：清空
//创建map结构
const map = new Map();
//添加键
map.set('name','clt').set('gender','girl').set('age',20);
//获取size
console.log(map.size); //3
//判断键
console.log(map.has('age')); //20
//获取值
console.log(map.get('age')); //true
//清空map
map.clear()
console.log(map.size); //0

✍问题一：能不能对Map设置对象属性？

  • 你带着疑问输入了以下代码，发现没有报错而且确实打印出来了,但是定睛一看，size=0 
    const map = new Map();
map.gender = 'girl';
map['name'] = 'clt';
console.log(map); //{gender: 'girl', name: 'clt', size: 0}
  • 因为这种方法只能说是对象的特性，但是数据并没有进入map的数据结构，也就是它并没有被map存储起来，所以size为0，同样其他操作方法也不生效；所以答案是可以，但是没有用 
    console.log(map.get('name')) //undefined
console.log(map.has('gender')); //false

✍问题二：既然是存储不重复的数据，那么是如何判断是否相等？

  • 主要是判断键是否相等
  • 键的判断是基于零值相等（SameValueZero）
  • 跟===的区别为对于===而言NaN !== NaN, 而对于零值运算而言两者是相等

这里我看过有一些说法是键的比较使用Object.is()，我感觉不太对？，Object.is()认为+0,-0不相等，而Map是认为相等的

const map = new Map();
map.set(+0,'123').set(-0,'345');
console.log(map); //0,345
console.log(Object.is(-0,+0)) //false

✍问题三：Map和Object的区别在哪里？

  • 键值：Map可以是任意值，包括函数，对象，基本类型，而对象只能是String或者Symbol或者整数

  • 键值对长度：Map可以直接通过size属性获取键值对长度，而Object没有提供该属性，需要手动遍历计算

  • 迭代：Map是可迭代的，有内置迭代器，但是Object没有实现迭代协议，没有内置迭代器

    console.log(typeof obj[Symbol.iterator]); //undefined 
console.log(typeof map[Symbol.iterator]); //function

  • 性能：Map在频繁增删键值对的场景下表现更好,而Object在频繁添加和删除键值对的场景下未作出优化

  • 序列化：JSON支持Object，但是尚未支持Map

    const obj = {
  name: 'clt',
  age: 20
}
const map = new Map();
map.set('name','clt').set('age',20);
console.log(JSON.stringify(obj)); //{"name":"clt","age":20}
console.log(JSON.stringify(map));//{}

  • 有序：Map是有序的，但是Object不能保证是有序的

    • Map有序我们前面已经提过了，试一下Object是否能够保证有序 
            //比如我创建一个如下的Object
      const o = Object.create(null, {
        m: {value: function() {}, enumerable: true},
        "2": {value: "2", enumerable: true},
        "b": {value: "b", enumerable: true},
        0: {value: 0, enumerable: true},
        [Symbol()]: {value: "sym", enumerable: true},
        "1": {value: "1", enumerable: true},
        "a": {value: "a", enumerable: true},
      });
    • 直接打印结果(chrome，这个结果在不同浏览器上不一定一致) image.png
    • for-in遍历打印结果

    image.png

  • 看完已经很烦了❌？上图✔️ image.png

✍ 问题四：什么时候使用Map

  • 向Object和Ma插入新键值对的消耗相当，但是一般插入Map会比较快一点，所以如果代码涉及大量插入操作，那么Map的性能更加
  • 当我们只需要一个简单的可查找存储结构时，Map相比Object更具优势，它提供了所有基本操作，但是如果涉及大量查找情况下，可能选择Object会好一点
  • 如果涉及大量删除操作，美美选择Map啦

✍ 问题五：上面提到了可以迭代，那么是怎么迭代呢

  • Map 可以使用 for..of 循环来实现迭代 
    //创建map结构
const map = new Map();
//添加键
map.set('name','clt').set('gender','girl').set('age',20);
for(let [key,item] of map) {
  console.log(key +'='+ item)
}
  • Map 也可以通过 forEach() 方法迭代，传入回调函数依次迭代每个键值对，有可选的第二个参数，用于重写回调内部this的值 
    //创建map结构
const map = new Map();
//添加键
map.set('name','clt').set('gender','girl').set('age',20);
map.forEach((value, key) => {
  console.log(key + '=' + value)
})

    这种行为跟在数组上调用forEach()方法略有不同，后者的回调函数会按照数值索引的顺序接收到每一个项，

✍ 问题六、是否可以一次性将大量数据添加到Map

  • 可以在构造Map的时候传入数组来初始化，该数组的每一项也必须是数组，内部首个项作为键，第二项作为对应值 
    const arr = [['name', 'mouche'] ,[ 'age', 20]];
const map = new Map(arr);
for(let [key, value] of map) {
  console.log(key+'='+ value);
} 
//name=mouche, age=20

✍ 问题七、如何将map转换为数组

  • 通过Array.from()
  • 通过展开运算符

Map就说到这里了，你以为我要说WeakMap？ 漏！搞定了垃圾回收才能搞懂WeakMap，所以我们就先来看看这个是啥玩意

二、垃圾回收

  • 原因：如果存在大量不被释放的内存（堆/栈/上下文），页面性能会变得很慢。垃圾回收顾名思义就是回收垃圾嘛，那么当某些代码操作不能被合理释放，就会造成内存泄漏，所以这个时候垃圾回收就出来发挥作用了
  • 浏览器垃圾回收机制有两种，我们分别来看看他们是啥玩意

1、标记清理

  • 2012年后所有浏览器都使用了这种策略
    • 垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记
    • 去掉环境中的变量以及被环境中的变量引用的变量的标记
    • 此时还被加上标记的会被视为准备删除的变量。
    • 垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间
  • 缺点：地址不连续，空间碎片化

2、引用计数

  • 弊端较多，IE9之前采用
  • 对每个值记录其被引用的次数，通过最后对次数的判断来决定是否保留
  • 最大问题：无法解决循环引用无法回收的问题

三、WeakMap

  • WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象(null除外)，而值可以是任意的
const wm = new WeakMap();
wm.set(null,'123');

image.png

  • 弱引用：是指不能确保其引用的对象不会被垃圾回收器回收的引用。一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收
  • 也就是说，当WeakMap键所指对象没有其他地方引用的时候，它会被垃圾回收机制回收掉

理解了垃圾回收机制再看这句话是不是就没有那么迷糊啦，拿捏🤏

  • WeakMap 不支持迭代以及 keys()，values() 和 entries() 方法
  • WeakMap的方法
    • get(key）：获取键对应值
    • set(key,value):存储键值对
    • delete(key): 删除键值对
    • has(key): 判断是否有该键值对

✍ 问题一：既然已经有map了，那么WeakMap出现的原因是什么🤡

  • 那么就先说一下map的问题；map通过使其四个API方法共用两个数组（一个存放键，一个存放值）来实现。给这种map设置值时会同时将键和值添加到这两个数组的末尾。从而使得键和值的索引在两个数组中相对应。当从该map取值的时候，需要遍历所有的键，然后使用索引从存储值的数组中检索出相应的值
  • 这就导致了无论是赋值还是搜索都需要遍历真个数组，时间复杂度为O(n)
  • 同时也可能导致内存泄漏，因为数组会一直引用这每个键和值，导致无法垃圾回收机制无法在他们没有其他引用的时候进行回收

✍ 问题二：为什么不支持迭代

  • 当键所指对象没有被其他地方引用的时候就会被回收，那么没有方法能给出所有的 key，即它的结果是不确定的，所以就没有必要提供迭代方法，所以也没有clear方法

✍ 问题三：WeakMap怎么用

DOM节点元数据
  • 因为WeakMap不会阻碍垃圾回收，所以非常适合保存关联元数据 
    const wm = weakMap();
cons loginButton = document.querySelector('#login');
wm.set(loginButton,{disabled:true})
  • 如上使用WeakMap，当节点从DOM树被删除后，垃圾回收程度就可以立即释放其内存（如果没有其他地方引用），但是如果你使用Map的话，即时节点删除后，由于映射中还保存着按钮的引用，所以DOM节点依旧会留在内存
私有变量
  • 先说一下ES6是如何创建私有变量，此处使用IIFE，含有privateData和privateId两个私有变量,当Person构造器被使用的时候,一个不可枚举，不可配置，不可写入的_id属性就被添加了。但是最大的问题是privateData里面的数据永不会消失，因为在对象实例被销毁的时候没有任何方法可以获取这个数据，所以privateData就会就永远会包含多余的数据
const Person = (function() {
  const privateData = {};
  let  privateId = 0;
  function Person(name) {
    Object.defineProperty(this,'_id' , {value:privateId++});
    privateData[this._id] = {
      name
    }
  }
  Person.prototype.getName = function() {
    return privateData[this._id];
  }
  return Person;
}())
  • 可以使用WeakMap来解决这个问题,由于Person实例本身能被作为键来使用，所以就没有必要记录ID，当Person构造器被调用时，this作为键，包含数据的对象即成了对应的值，getName()能够提取其私有信息。当私有信息与之关联的对象实例被销毁的时候，私有信息也会同时被销毁，也就解决了上述的问题
const Person = (function(){
  const privateData = new WeakMap();
  function Person(name) {
    privateData.set(this,{name});
  }
  Person.prototype.getName = function() {
    return privateData.get(this).name;
  }
  return Person
}())
const person = new Person('123');
console.log(person.getName()) //123
avatar
文章
阅读
粉丝