Set And Map Base Use In ESNext.

113 阅读2分钟

Set

// Set中的值是不会重复的支持forEach、for..of(可做数组去重)
const set = new Set(); // 强引用
// add添加值
set.add(10);
set.add(11);
set.add(12);
set.add(13);
set.add(10);
// 可以添加两个空对象是因为地址不同
set.add({});
const obj = {};
set.add(obj);
// 数组也同理
set.add([]);
const arr = [];
set.add(arr);

// 删除元素(不能通过下标只能通过值)
set.delete(10);

// 这样是删不掉的因为这个新创建对象的地址在set中并没有
// set.delete({});

// 这样是能删掉的因为obj存储的本身就是地址这个时候在Set中能找到
set.delete(obj);

console.log(set);
// 获取Set长度用size而不是像数组一样用length
console.log(set.size);
// has判断Set集合中是否包含某个值(true、false)
console.log(set.has(12));

// 清除Set集合
set.clear();
console.log(set);

// Set进行数组去重
const numberArr = [1, 2, 3, 5, 8, 13, 21, 1];
// 实例化时可传入可迭代对象
const arrSet = [...new Set(numberArr)];
console.log(arrSet);

// 有兴趣可以研究一下
const setKeys = set.keys();
const setValues = set.values();

console.log(setKeys.next());
console.log(setKeys.next().value);
console.log(setKeys.return);
console.log(setKeys.throw);
// keys有的values都有
console.log(setValues);

WeakSet

// WeakSet只能存储对象类型且对对象是弱引用(add、delete、has)
const weakSet = new WeakSet();
// weakSet.add('2'); 报错因为只能存储对象(且不可遍历)
weakSet.add({});

// 应用场景
const classSet = new WeakSet();

class Person {
    constructor() {
        classSet.add(this)
    }
    // p = null; 就会被GC回收(因为是弱引用所以GC不会管WeakSet的弱引用)
    // 而如果用的是Set的话需要 p = null、classSet.delete(p); 才能被GC回收(因为Set是强引用)
    studying() {
        if (classSet.has(this)) console.log('studying~');
        else throw new Error('不能非构造调用!')
    }
}
const p = new Person();
// p.studying.call(); 不行
p.studying();

Map And WeakMap

// Map(除了常规值还可用obj、arr当key)[强引用]
const map = new Map();

const obj1 = { name: 'SharkDog' },
    obj2 = { name: 'Susu' };

const arr1 = [1],
    arr2 = [2];

// set方法存值
map.set(obj1, 'obj1');
map.set(obj2, 'objTwo');
map.set(arr1, 'arrOne');
map.set(arr2, 'arrTwo');
// Map可用的方法和Set一致
console.log(map);
// 获取大小和Set一样类似length
console.log(map.size);
// 获取值
console.log(map.get(obj1));
// 是否存在
console.log(map.has(arr1));
// 删除
console.log(map.delete(arr2));

// 遍历也一样
for (const [key, value] of map) {
    // 可以看作map存储的是个数组 数组内又存储了数组所以要这样用
    console.log(key, value);
}

// 清空
map.clear();
console.log(map);

console.log(new Map([[obj1, 'obj'], [arr1, 'arr'], [2, 'Two']]));


// WeakMap(可用方法和WeakSet一样)[弱引用]
// const weakMap = new WeakMap(); 不要小看可以做Vue3响应式

弱引用:当只有弱引用指向某块内存时GC会回收

强引用:不会被GC忽略从而不会回收(内存泄漏可看前面的文章)