深入JavaScript Day16、17 - Set、Weak

一、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())

二、Day17

1、【重要】数组的flat、flatMap函数有什么作用？（要能回忆起基本用法）

• 【核心】flat是平铺的意思，就是将数组中的数组，平铺开来

image.png

2、如何在JavaScript中表示比较大的数值？

• 使用 【BigInt】数据类型

image.png

3、【重要】为什么需要出现空值合并运算符？如何只用空值合并运算符？

• 在ES11之前，const result1 = foo || "默认值"，这种方式存在缺陷，当 foo==="" 或 foo===0 时，就会出现不如人意的表现，所以出现了空值合并运算符。

image.png

4、【重要】为什么会出现可选链？可续了的基本使用？

• 可选链的出现，大大降低了我们对异常值的处理效率，代码变得更加简洁而优雅

image.png