ES6——Map、Set

• 在ES6之前，我们存储数据的结构主要有两种：数组、对象。
• 在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

Set和WeakSet

Set的使用

• Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
• 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：
• 可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

//通过new关键字创建
const set1 = new Set();
set1.add(1)
set1.add(2)
set1.add(2)
set1.add({name:13})
console.log(set1);  //Set(3) { 1, 2, { name: 13 } }

//根据数组创建set对象
const set2 = new Set([1,2,3,4,5,5])
console.log(set2);  //Set(5) { 1, 2, 3, 4, 5 }

//将set转变为数组
const newArray1 = [...set2]
console.log(newArray1);
const newArray2 = Array.from(set2)
console.log(newArray2);

Set的常见属性和方法

• size：返回Set中元素的个数；

method：

• add(value)：添加某个元素，返回Set对象本身；
• delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
• has(value)：判断set中是否存在某个元素，返回boolean类型；
• clear()：清空set中所有的元素，没有返回值；
• forEach(callback, [, thisArg])：通过forEach遍历set；
• Set是支持for of的遍历的。

WeakSet的使用

• 和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
• 和Set的区别
  区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
  区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收（弱引用可以理解为有地址指向对象，但是对象依然能够被销毁）；

const wset = new WeakSet()
const obj1 = {
  name:"zs",
  age:14
}
const obj12 = {
  name:"zsss",
  age:142
}
wset.add(10) //报错：invalid val used
wset.add(obj1)
wset.add(obj12)
console.log(wset);

WeakSet常见的方法：

• add(value)：添加某个元素，返回WeakSet对象本身；
• delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
• has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

const wset = new WeakSet();
const obj1 = {
  name: "zs",
  age: 14,
};
const obj2 = {
  name: "zsss",
  age: 142,
};

const obj3 = {
  name: "zsss",
  age: 142,
};
// wset.add(10)
wset.add(obj1);
wset.add(obj2);

console.log(wset.has(obj2)); //true
console.log(wset.has(obj3)); //false，注意

wset.delete(obj2);
console.log(wset.has(obj2)); //false

WeakSet的应用

• 阻止其他的对象的借用调用

const wset = new WeakSet();
class Person {
  constructor() {
    wset.add(this);  //将创建的对象保存到weakset中
  }
  running() {
    //每次调用该方法先判断weakset中是否有保证该对象，保证只有Person类的子对象可以调用
    if (!wset.has(this)) {
      throw new Error("不能通过其他类型的对象调用running方法");
    }
    console.log("running", this);
  }
}

Map和WeakMap

Map的使用

• Map用于存储映射关系。
  之前我们可以使用对象来存储映射关系，有什么区别呢？
  对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；那么我们就可以使用Map：

const obj = { name: "zs", age: 18, height: 1.88 };
const obj2 = { name: "zsss", age: 11, height: 1.55 };

const map1 = new Map();
map1.set(obj, "abc");
map1.set(obj2, "bcd");
console.log(map1);
/* Map(2) {
  { name: 'zs', age: 18, height: 1.88 } => 'abc',
  { name: 'zsss', age: 11, height: 1.55 } => 'bcd'
} */

console.log(map1.get(obj)); //abc

Map的常用属性方法

• size：返回Map中元素的个数；

Map常见的方法：

• set(key, value)：在Map中添加key、value，并且返回整个Map对象；
• get(key)：根据key获取Map中的value；
• has(key)：判断是否包括某一个key，返回Boolean类型；
• delete(key)：根据key删除一个键值对，返回Boolean类型；
• clear()：清空所有的元素；
• forEach(callback, [, thisArg])：通过forEach遍历Map；
• Map也可以通过for of进行遍历。

WeakMap的使用

• 和Map区别
  区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
  区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

WeakMap的常用属性方法：

• set(key, value)：在Map中添加key、value，并且返回整个Map对象；
• get(key)：根据key获取Map中的value；
• has(key)：判断是否包括某一个key，返回Boolean类型；
• delete(key)：根据key删除一个键值对，返回Boolean类型；

WeakMap的应用 ：

• vue3响应式原理

//WeakMap(fkey(对象)：value.}):key是一个对象，弱引用
const targetMap = new WeakMap();
function getDep(target, key) {
  //·1.根据对象(target)取出对应的Map对象
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
    //·2.取出具体的dep对象
    let dep = depsMap.get(key);
    if (!dep) dep = new Dep();
    depsMap.set(key, dep);
  }
  return dep;
}