js中set和weakset，map和weakmap

Set

• Set是数据结构中的一种叫集合的数据结构，最大的特点是数据不能重复，无序的，不能通过下标值进行修改
• set的存储的数据类型可以是任意的
• set的引用是强引用
• Set类的实现

//封装集合类
function Set() {
  //属性
  this.items = {}; //可以是对象，也可以是数组
  //方法
  //   1- add(value) 添加方法
  Set.prototype.add = function (value) {
    if (this.has(value)) {
      return false;
    }

    this.items[value] = value;
    return true;
  };
  // 2- remove(value) 删除方法
  Set.prototype.remove = function (value) {
    if (!this.has(value)) {
      return false;
    }
    delete this.items[value];
    return true;
  };

  // 3- has(value) 判断集合中是否有对应的值,有返回 true
  Set.prototype.has = function (value) {
    return this.items.hasOwnProperty(value);
  };
  // 4- clear() 清除集合中所有的元素
  Set.prototype.clear = function () {
    this.items = {};
  };
  // 5- size() 返回集合中元素的个数
  Set.prototype.size = function () {
    return Object.keys(this.items).length;
  };
  // 6- values() 将集合中元素返回为一个数组
  Set.prototype.values = function () {
    return Object.keys(this.items);
  };
}

weakSet

• 存储的数据只能是对象类型
• 存储的数据不能被遍历出来
• 引用为弱引用

const obj = { name: 'jack' };
const ad = new WeakSet();
ad.add(obj);
for (let item of ad) {
  console.log(item); //TypeError: ad is not iterable
}

弱引用和强引用

• 强引用可以理解为在全局有一个变量指向对应的数据,数据在用完之后，由于全局有一个变量指向，数据是不能被销毁的，
• 弱引用就是数据在用完之后，会被垃圾回收器回收，数据会被销毁
• 但是都可以通过 . 来找到相应的数据

var obj = {name:"jack"}
const set  = new Set
set.add(obj)

Map

• map也是数据结构中一种叫字典的数据类型，
• 存储的数据类型是key，value，其实和object非常相似
  实现的方法和上面的集合实现方法差不多，这里就不贴代码了

const obj1 = { name: 'jack' };
const obj2 = { name: 'mask' };

//字典
const map = new Map();
//可以将对象或者其他任意数据类型作为key值
map.set(obj1, 'aaa');
map.set(obj2, 'ccc');
console.log(map);
console.log(map.values());
for (let item of map) {
  console.log(item[0], item[1]);
}
for (let [key, value] of map) {
  console.log(key, value);
}

WeakMap

• weakmap也是一种弱引用
• key只能为对象的数据类型
• 不能遍历
  vue的响应式原理用的就是weakmap和map的组合

const obj1 = {
 name: 'jack',
 age: '18',
};

const weakmap = new WeakMap();

const map = new Map();

function obj1namefunction() {
 console.log('obj1name被执行');
}
function obj1agefunction() {
 console.log('obj1age被执行');
}
//将obj的属性设置触发函数
map.set('name', [obj1namefunction]);
map.set('age', [obj1agefunction]);
//将obj1和触发函数设置为weakmap
weakmap.set(obj1, map);
//改变属性
obj1.name = 'jame';
//拿到改变属性的对象
const targetmap = weakmap.get(obj1);
//在从对象中拿到对应的value值
const fn = targetmap.get('name');
//遍历对应的value值进行调用
fn.forEach((item) => {
 item(); //obj1name被执行
});