JS中的Map、Set、WeakMap和WeakSet

特点和使用场景

在JavaScript中，Map、Set、WeakMap和WeakSet是四个不同的数据结构，它们都有不同的特点和用途：

• Map：Map是一种键值对的集合，其中的键和值可以是任意类型的。与对象类似，它们可以通过键来访问值。不同之处在于，Map可以使用任意类型作为键，而对象只能使用字符串或Symbol类型作为键。Map还提供了许多有用的方法，例如size属性来获取键值对的数量，以及forEach()方法来遍历集合。
• Set：Set是一种值的集合，其中每个值都是唯一的。与数组不同，它们没有重复的元素，并且没有特定的顺序。Set提供了许多有用的方法，例如add()方法来添加新的值，delete()方法来删除值，has()方法来检查是否存在某个值，以及size属性来获取集合的大小。
• WeakMap：WeakMap与Map类似，也是一种键值对的集合。然而，它们的键必须是对象，而值可以是任何类型。与Map不同的是，WeakMap的键是弱引用，也就是说，如果键对象没有被其他地方引用，则它们可以被垃圾回收。这使得WeakMap非常适合缓存数据，因为当对象不再需要时，它们可以自动从WeakMap中删除，从而释放内存。
• WeakSet：WeakSet是一种值的集合，其中每个值都是唯一的，并且没有特定的顺序。与Set不同的是，它们的值也是弱引用的，因此可以被垃圾回收。WeakSet通常用于存储对象的引用，以避免内存泄漏。

Map、Set、WeakMap和WeakSet的例子：

1. Map：

const myMap = new Map();
const key1 = 'key1';
const key2 = { name: 'John' };
const key3 = function () { console.log('Hello!'); };
myMap.set(key1, 'value1');
myMap.set(key2, 'value2');
myMap.set(key3, 'value3');
console.log(myMap.get(key1)); // 'value1'
console.log(myMap.get(key2)); // 'value2'
console.log(myMap.get(key3)); // 'value3'
console.log(myMap.size); // 3

在这个例子中，我们创建了一个Map对象，并使用三个不同类型的键(key1、key2、key3)来存储三个值(value1、value2、value3)。我们可以使用get()方法来获取相应的值，使用size属性来获取键值对的数量。

2. Set：

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
console.log(mySet.has('value1')); // true
console.log(mySet.has('value4')); // false
console.log(mySet.size); // 3
mySet.delete('value2');
console.log(mySet.size); // 2

在这个例子中，我们创建了一个Set对象，并使用add()方法向其中添加三个值(value1、value2、value3)。我们可以使用has()方法来检查集合中是否存在某个值，使用size属性来获取集合的大小，使用delete()方法来删除值。

3. WeakMap：

let key1 = { name: 'John' };
let key2 = { name: 'Mary' };
let weakMap = new WeakMap();
weakMap.set(key1, 'value1');
weakMap.set(key2, 'value2');
key1 = null; // 键对象没有被其他地方引用
console.log(weakMap.get(key1)); // undefined
console.log(weakMap.get(key2)); // 'value2'

在这个例子中，我们创建了一个WeakMap对象，并使用两个对象键(key1、key2)来存储两个值(value1、value2)。然后我们将key1赋值为null，这将导致key1对象被垃圾回收，它们与值value1一起被从WeakMap中删除。当我们使用get()方法尝试访问已经被删除的键时，返回undefined。

4. WeakSet：

let obj1 = { name: 'John' };
let obj2 = { name: 'Mary' };
let weakSet = new WeakSet([obj1, obj2]);
console.log(weakSet.has(obj1)); // true
obj1 = null;
console.log(weakSet.has(obj1)); // false

在这个例子中，我们创建了一个WeakSet对象，并向其中添加两个对象(obj1、obj2)。我们可以使用has()方法检查WeakSet中是否存在某个对象，当我们将obj1赋值为null时，它们与值一起被从WeakSet中删除。当我们使用has()方法尝试访问已经被删除的对象时，返回false。

Map、Set、WeakMap和WeakSet之间的区别和使用场景：

1. Map和Set：

Map和Set都是集合数据结构，不同之处在于：

• Map存储键值对，可以使用任何类型作为键，而Set只存储值，并且每个值必须是唯一的。
• Map提供了更多的方法来操作键值对，如get()、set()和size属性等。而Set则提供了更多的方法来操作值，如add()、delete()和has()等。

使用场景：

• 当需要存储键值对并且需要使用键来访问值时，可以使用Map。
• 当需要存储唯一的值时，可以使用Set。

2. WeakMap和WeakSet：

WeakMap和WeakSet与Map和Set类似，但是它们的键或值是弱引用，也就是说当键或值对象没有其他引用时，它们可以被垃圾回收，不会影响程序的内存使用情况。不同之处在于：

• WeakMap和WeakSet只能使用对象作为键或值。
• WeakMap和WeakSet没有size属性，因为其内容可能会随时被垃圾回收。

使用场景：

• 当需要存储需要进行垃圾回收的对象，并且这些对象只能被作为键或值来存储时，可以使用WeakMap和WeakSet。
• 当需要在内存受限的情况下使用缓存时，可以使用WeakMap和WeakSet来存储数据，因为它们会随时被垃圾回收，从而释放内存。

WeakMap关于深拷贝的使用场景

通过递归处理深拷贝，那么出现对象相互引用的情况，这种情况将会导致递归无法结束。

const a = {name: "a"};
const b = {name: "b"};
a.b = b;
b.a = a; // 相互引用
console.log(a); // { name: 'a', b: { name: 'b', a: [Circular] } }

对于上面这种情况，我们需要怎么拷贝相互引用后的a对象呢？
我们也是按照上面的方式进行递归拷贝:

// ① 创建一个空的对象，表示对a对象的拷贝结果
const aClone = {};
// ② 遍历a中的属性，name和b, 首先拷贝name属性和b属性
aClone.name = a.name;
// ③ 接着拷贝b属性，而b的属性值为b对象，需要进行递归拷贝，同时包含name和a属性，先拷贝name属性
const bClone = {};
bClone.name = b.name;
// ④ 接着拷贝a属性，而a的属性值为a对象，我们需要将之前a的拷贝对象aClone赋值即可
bClone.a = aClone;
// ⑤ 此时bClone已经拷贝完成，再将bClone赋值给aClone的b属性即可
aClone.b = bClone;
console.log(aClone); // { name: 'a', b: { name: 'b', a: [Circular] } }

其中最关键的就是第④步，这里就是结束递归的关键，我们是拿到了a的拷贝结果进行了赋值，所以我们需要记录下某个对象的拷贝结果，如果之前已经拷贝过，那么我们直接拿到拷贝结果赋值即可完成相互引用。
而JS提供了一种WeakMap数据结构，其只能用对象作为key值进行存储，我们可以用拷贝前的对象作为key，拷贝后的结果对象作为value，当出现相互引用关系的时候，我们只需要从WeakMap对象中取出之前已经拷贝的结果对象赋值即可形成相互引用关系。

function deepClone(source, map = new WeakMap()) { // 传入一个WeakMap对象用于记录拷贝前和拷贝后的映射关系
    if (typeof source !== "object") { // 非对象类型(undefined、boolean、number、string、symbol)，直接返回原值即可
        return source;
    }
    if (source === null) { // 为null类型的时候
        return source;
    }
    if (source instanceof Date) { // Date类型
        return new Date(source);
    }
    if (source instanceof RegExp) { // RegExp正则类型
        return new RegExp(source);
    }
    if (map.get(source)) { // 如果存在相互引用，则从map中取出之前拷贝的结果对象并返回以便形成相互引用关系
        return map.get(source);
    }
    let result;
    if (Array.isArray(source)) { // 数组
        result = [];
        map.set(source, result); // 数组也会存在相互引用
        source.forEach((item) => {
            result.push(deepClone(item, map)); // 必须传入第一次调用deepClone时候创建的map对象
        });
        return result;
    } else { // 为对象的时候
        result = {};
        map.set(source, result); // 保存已拷贝的对象
        const keys = [...Object.getOwnPropertyNames(source), ...Object.getOwnPropertySymbols(source)]; // 取出对象的key以及symbol类型的key
        keys.forEach(key => {
            let item = source[key];
            result[key] = deepClone(item, map); // 必须传入第一次调用deepClone时候创建的map对象
        });
        return result;
    }
}

这样实现了一个相对比较完善的深拷贝。