一、Day16

1、Array和Set最大的区别是什么？Set常见应用是什么？

【区别】Set不能存储重复元素
【应用】Set常用于数组去重

2、WeakSet 和 Set有哪两个主要区别？

【区别一】WeakSet中只能存放对象类型，不能存放基本数据类型；
【区别二】WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

3、Map 和 Object 有什么异同？

【同】Map和Object底层都是HashTable的实现的，用于存储键值对
【异】Object的key只能是字符串，Map的key可以是对象类型。

4、Map 和 WeakMap的区别？

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

5、Array中判断某个元素是否存在？

image.png

6、【重点】借助Map和WeakMap，实现响应式原理的后半段代码（注意思想）？

【核心思想】让对象的属性和方法进行绑定；当对象的属性改变时，能拿出绑定的方法进行调用即可。

// 应用场景(vue3响应式原理)
const obj1 = {
  name: "why",
  age: 18
}

function obj1NameFn1() {
  console.log("obj1NameFn1被执行")
}

function obj1NameFn2() {
  console.log("obj1NameFn2被执行")
}

function obj1AgeFn1() {
  console.log("obj1AgeFn1")
}

function obj1AgeFn2() {
  console.log("obj1AgeFn2")
}

const obj2 = {
  name: "kobe",
  height: 1.88,
  address: "广州市"
}

function obj2NameFn1() {
  console.log("obj1NameFn1被执行")
}

function obj2NameFn2() {
  console.log("obj1NameFn2被执行")
}

// 1.创建WeakMap
const weakMap = new WeakMap()

// 2.收集依赖结构
// 2.1.对obj1收集的数据结构
const obj1Map = new Map()
obj1Map.set("name", [obj1NameFn1, obj1NameFn2])
obj1Map.set("age", [obj1AgeFn1, obj1AgeFn2])
weakMap.set(obj1, obj1Map)

// 2.2.对obj2收集的数据结构
const obj2Map = new Map()
obj2Map.set("name", [obj2NameFn1, obj2NameFn2])
weakMap.set(obj2, obj2Map)

// 3.如果obj1.name发生了改变
// Proxy/Object.defineProperty
obj1.name = "james"
const targetMap = weakMap.get(obj1)
const fns = targetMap.get("name")
fns.forEach(item => item())