Map和WeakMap的使用

嘿，小明

已于 2022-06-30 15:23:27 修改

阅读量334

点赞数

分类专栏： es6 文章标签：前端 javascript

于 2022-06-28 01:09:04 首次发布

本文链接：https://blog.csdn.net/weixin_47673292/article/details/125494610

版权

es6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了ES6中的Map和WeakMap数据结构，Map允许任何类型的值作为键，而WeakMap则限制键必须为对象且持有弱引用。在手动实现响应式原理的例子中，通过WeakMap和Map结合，当对象属性变化时，能够触发关联的函数执行。文章还探讨了强引用与弱引用的概念，并给出了具体的代码示例。

摘要由CSDN通过智能技术生成

在ES6中新增了Map和WeakMap这俩个类

Map用来存储映射关系键值对的，在普通对象在存储时，key值只能为字符串或Symbol类型

Map储存时就可以把对象或者其他类型作为一个对象的key值

Map和WeakMap的区别：

Map在储存时可以把任何类型作为对象的key值，并且它的内存引用为强引用

WeakMap在储存时只能使用对象类型作为对象的key值，他的内存引用为弱引用，且不能被迭代

强引用与弱引用的解释文章地址，在ES12里有解释：http://t.csdn.cn/ZegT3

手动调用响应式原理：

// 当obj内属性发生改变时 执行对应的函数 
// 先创建一个对象和函数，并把它们关联起来 形成映射关系

const obj = {
  name: '小明',
  age: 18,
};

function objNameFn() {
  console.log('obj对象中的name属性发生了改变为：',obj.name);
};

function objAgeFn1() {
  console.log('obj对象中的age属性发生了改变为：',obj.age);
};

function objAgeFn2() {
  console.log('age改变成功');
};

// 定义WeakMap类型 存储obj对象为key
// 为什么要用WeakMap呢 因为他为弱引用 当obj情空后 obj就会被销毁掉 而下面用map是因为key为其他类型 WeakMap只能用对象作key

const weakMap = new WeakMap();

// 定义map类型 存储obj内的属性 把属性和函数关联起来 再放入到WeakMap中
const map = new Map();
map.set('name',objNameFn);
map.set('age',[objAgeFn1,objAgeFn2]);
console.log(map);

weakMap.set(obj,map);

obj.name = '小陈';
obj.age = 17;
const targetItem = weakMap.get(obj);

// 此时targetItem就为map 再用targetItem取到已修改的属性名 因已绑定函数 
// 拿到后看Map存储条件 直接存直接调用 多个利用数组存循环遍历就实现了 改变数据调用函数

const nameFns = targetItem.get('name');
const ageFns = targetItem.get('age');
console.log(nameFns);
console.log(ageFns);
nameFns();
// ageFns();
// nameFns.forEach(item => item());
ageFns.forEach(item => item());