ES6小知识续集

1：set的一些使用

//创建set结构
const arr = new Set()
arr.add(30)
arr.add(40)
arr.add(50)
    //set里面元素不能重复
arr.add(30)
console.log(arr);
//应用场景 数组去重
const arr1 = [10, 20, 10, 30, 40, 50]
const names = ['lili', 'qiiq', 'yaya']
const setarr1 = new Set(arr1)
const setarr2 = new Set(arr1)
    //set支持展开运算符
const set2 = [...setarr1]
    //转换成为数组
const set3 = Array.from(setarr1)
console.log(setarr1);
console.log(set2);
console.log(set3);
//size属性
console.log(setarr1.size);
//set方法
setarr1.add(60)
setarr1.delete(20)
setarr2.clear()
setarr2.has(20)
setarr1.has(20)
//遍历
setarr1.forEach(element => {
    console.log(element);
});
for (const item of setarr1) {
    console.log(item);
}

 

 2：WeakSet和Set的区别

区别：只能存储对象类型，不能存放基本数据类型 WeakSet对象是一个弱引用

从根对象开始，有引用指着就不会被回收

强引用 strong reference 在GC回收时候是有效的

弱引用 weak reference GC不把弱引用当条线

总结弱引用：通过线获取值，但是可以直接回收

应用场景：想要只能创建的对象才能调用某方法

const pwset = new WeakSet()
class Person {
    constructor() {
        pwset.add(this)
    }
    running() {
        if (!pwset.has(this)) throw new Error("不能通过其他对象调用running方法")
        console.log("running", this);
    }
}
var p = new Person()
    //可以正常调用 因为是通过 New Person的方式
p.running()
    //不可以正常调用 会抛出异常
    // p.running.call({ name: 'tyy' })

3：Map和weakMap

Map的基本使用：

//map的创建过程
const map = new Map()
const obj = { name: 'tyy' }
const obj1 = { name: "tsf" }
map.set(obj, "aaa")
map.set(obj1, "bbb")
map.set(1, "ccc")
console.log(map);
const map2 = new Map([
    [obj, "aaa"],
    [obj1, "bbb"],
    [1, "ccc"]
])
console.log(map2);
//常见的属性和方法 set get has delete clear() froEach
console.log(map.size);
console.log(map.has(obj));

 

 weakMap

和Map的区别

1：weakMap key只能是对象类型，不能是基本数据类型

2：weakMap key 与value是弱引用

基本使用：

const obj = { name: 'tyy' }
const obj1 = { age: 20 }
const weakMap = new WeakMap()
weakMap.set(obj, 'aaa')
console.log(weakMap);
//weakMap的常见的一些法 get set has delete
//weakMap没有forEach方法 和size属性

weakMap的应用场景，类似于Vue里面的响应式原理，这里我们把响应式当做，当对象里面的某值发生改变，某几个函数执行

// 应用场景(vue3响应式原理)
const obj1 = {
    name: 'tyy',
    age: 20
}
const obj2 = {
        mood: 'happy',
        address: 'libray'
    }
    //监听obj1 name 变化的函数
function obj1NameFn1() {
    console.log('obj1NameFn1执行');
}

function obj1NameFn2() {
    console.log('obj1NameFn2执行');
}
//监听 obj1 age变化的函数
function obj1AgeFn1() {
    console.log('obj1AgeFn1执行');
}

function obj1AgeFn2() {
    console.log('obj1AgeFn2执行');
}
//监听obj2 mood变化的函数
function obj2moodFn1() {
    console.log('obj2moodFn1执行');
}

function obj2moodFn2() {
    console.log('obj2moodFn2执行');
}
//监听obj2 address变化的函数
function obj2addressFn1() {
    console.log('obj2addressFn1执行');
}

function obj2addressFn2() {
    console.log('obj2addressFn2执行');
}


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

// 2.收集依赖结构
// 2.1.对obj1收集的数据结构
const map1 = new Map()
map1.set('name', [obj1NameFn1, obj1NameFn2])
map1.set('age', [obj1AgeFn1, obj1AgeFn2])
weakMap.set(obj1, map1)
    // 2.2.对obj2收集的数据结构
const map2 = new Map()
map2.set('mood', [obj2moodFn1, obj2moodFn2])
map2.set('address', [obj2addressFn1, obj2addressFn2])
weakMap.set(obj2, map2)
    // 3.如果obj1.name发生了改变
    // Proxy/Object.defineProperty 用来监听属性的这里没有监听
obj1.name = 'change'
const targetMap = weakMap.get(obj1)
const fns = targetMap.get('name')
fns.forEach(fn => {
    fn()

});