Map

介绍

Map结构类似对象，也是键值对的形式，但是它的键不只是字符串，可以是任意形式，也就是值-值的形式，是一种完善的Hash结构。

    const obj = { name: 'alan' };
    const map = new Map();
    map.set(obj, 'map');
    console.log(map);
    console.log(map.size) // 1

它也可以接收数组，但必须是具有Iterator接口切每个成员都是双元素的数组结构，这是因为它内部实现是将数组的第一个成员作为key，第二个成员作为value进行赋值的。

    const obj = { name: 'alan' };
    const map = new Map([['asd', obj], [12, 23]]);
    console.log(map);
    // 内部实现
    map.forEach(([key,val])=>map.set(key,val))

Tips：

• 对同一个key进行多次赋值，会覆盖前面的值。
• 读取一个不存在的值，返回undefined

Map实例的属性和方法

拥有size方法，其实整体的方法和Set差不多

map.size()  // 返回成员总数

操作方法

1. set(key,val)
2. get(key) // 返回val或者undefined
3. has(key) // 返回布尔值
4. delete(key) // 返回布尔，删除失败就是false
5. clear() // 清空所有成员，无返回值

遍历方法

1. keys() // 返回键名的遍历器
2. values() // 返回值的遍历器
3. entries() // 返回所有成员的遍历器
4. forEach() // 遍历Map

    const map = new Map();
    map.set('name', 'alan').set('age', '23').set('looks', 'handsome');
   
    console.log(map.keys()); // MapIterator {"name", "age", "looks"}

    const map = new Map();
    map.set('name', 'alan').set('age', '23').set('looks', 'handsome');
   
    console.log(map.values()); // MapIterator {"alan", "23", "handsome"}
    
    const map = new Map();
    map.set('name', 'alan').set('age', '23').set('looks', 'handsome');
   
    console.log(map.entries()); 
    // MapIterator {"name" => "alan", "age" => "23", "looks" => "handsome"}
    
    也可以这样遍历
    const map = new Map();
    map.set('name', 'alan').set('age', '23').set('looks', 'handsome');
    // eslint-disable-next-line no-restricted-syntax
    for (const [key, val] of map) {
      console.log(key, val);
    }
    // name alan
    // age 23
    // looks handsome

Map与其他结构的转换

• 和数组相互转化，直接使用扩展运算符

    const arr = [...map];
    console.log(arr); 
    //  [['name', 'alan'], ['age', '23'], ['looks', 'handsome']];
    
    数组转map就直接将双元素的数组结构传进去
    const obj = { name: 'alan' };
    const map = new Map([['asd', obj], [12, 23]]);

• 和对象相互转化

map转对象

    const map = new Map();
    map.set('name', 'alan').set('age', '23').set('looks', 'handsome');
    const obj = {};
    for (const [key, val] of map) {
      obj[key] = val;
    }
    console.log(obj); // {name: "alan", age: "23", looks: "handsome"}

对象转map

    const obj = {
      name: 'alan',
      age: '23',
      looks: 'handsome',
    };
    const map = new Map();
    Object.keys(obj).forEach((ele) => {
      map.set(ele, obj[ele]);
    });
    console.log(map); 
    // {"name" => "alan", "age" => "23", "looks" => "handsome"}

WeakMap

1. WeakMap的键只能是对象
2. WeakMap的键所指向的对象，不计入垃圾回收
3. 语法方面，WeakMap没有遍历操作，没有size属性，不支持clear方法

• 用途

WeakMap通常可以用在我们不想手动清除引用的数据，比如vue里的依赖收集，收集到响应式数据的依赖后，不引用这个依赖后，这个依赖就会被WeakMap自动清除掉。