一. 集合对象的序列化问题

案例如下：我们创建一个Map和一个Set集合，并用JSON.stringify进行序列化操作。

(async () => {
    const map = new Map();
    map.set(1, '1');
    map.set(2, '1');
    console.log('map', JSON.stringify(map));

    const set = new Set();
    set.add(1);
    set.add(2);
    console.log('set', JSON.stringify(set))
})();

结果如下：

可见，JSON.stringify 对Map、Set 的序列化是不支持的。那么我们如何进行修改？我们一点点分析。

1.1 Map 和 Object 的区别

• 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
• Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
• Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
• Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

1.2 Map 的相关转换

先说下两个方法：

• Object.entries()：返回一个数组，成员是对象自身的所有可遍历属性的键值对数组。
• Object.fromEntries()：是Object.entries()的逆操作，用于将一个键值对数组转为对象。

Map 和 Array 互转

Array转Map：如果想要Array转换成Map，我们则需要传入一个二维数组，每个数组的第一个值为key，第二个值为value。

Map转Array：使用Array.from即可。

(async () => {
    //二维数组
    const arr = [["key1", "value1"], ["key2", "value2"]];
    // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
    const myMap = new Map(arr);
    console.log(myMap);
    // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
    const outArray = Array.from(myMap);
    console.log(outArray);
})();

Map 和 Object 互转

如果想把Map进行序列化，我们可以把它转换成Object对象。有两种思路：

• 我们可以将Map对象转换为一个Object对象，再进行序列化。
• 我们遍历Map对象的键值对，然后构造出一个Object对象。

(async () => {
    const map = new Map();
    map.set(1, '1');
    map.set(2, '1');
    // JS语法(TS里面可能会提示报错) Object.fromEntries 用于将一个键值对数组转为对象
    console.log('map-js', JSON.stringify(Object.fromEntries(map)));
    // TS语法（JS和TS通用），通过遍历键值对来构造
    const tsMapObj = Array.from(map.entries()).reduce((obj, [key, value]) => (obj[key] = value, obj), {})
    console.log('map-ts', JSON.stringify(tsMapObj));
    // Object 转 Map
    const mapFromObj = new Map(Object.entries(tsMapObj));
    console.log(mapFromObj)
    console.log(mapFromObj.get('1'))
    console.log(mapFromObj.get('2'))
})();

结果如下：（转成Object对象之后，就可以进行序列化输出啦）

1.3 Set 的相关转换

Set 和 Array 互转

(async () => {
    const set = new Set();
    set.add(1);
    set.add(2);
    // Set 转 Array,
    const arr = Array.from(set)
    console.log('set', JSON.stringify(arr));
    // Array 转 Set 构造Set的时候传入即可
    console.log(new Set(arr))
})();

结果如下：