typescript中map对象序列化为{}问题

文章目录

• typescript中map对象序列化为{}问题
• • 问题描述
  • 解决思路
  • 封装序列化工具类解决嵌套对象的情况

typescript中map对象序列化为{}问题

问题描述

ts中在使用JSON进行map对象的序列化时，发现值始终为{}，如下代码所示：

let map = new Map<string, string>();
map.set("lzp", "666");
map.set("编程小龙", "666");
console.log("序列化之前");
console.log(map);
console.log("序列化之后");
console.log(JSON.stringify(map));

解决思路

可以使用Object.fromEntries将map对象转换成json对象，然后再序列化，接着配合Object.entries将反序列化的结果再转换为map集合

let map = new Map<string, string>();
map.set("lzp", "666");
map.set("编程小龙", "666");
console.log("序列化之前");
console.log(map);
console.log("序列化之后");
let jsonStr = JSON.stringify(Object.fromEntries(map));
console.log(jsonStr);
console.log("反序列化之后");
map = new Map(Object.entries(JSON.parse(jsonStr)));
console.log(map);

封装序列化工具类解决嵌套对象的情况

面对更复杂的场景，即可能出现对象的多重嵌套的情况，此时咱们可以先将原对象深度转换成json对象，然后再序列化，如下所示：

封装工具类：

/**
 * 处理map类型序列化后为 {} 的情况
 */
export function stringify(obj: any): string {
  return JSON.stringify(cloneToObject(obj));
}

// 将字段包含map的对象转为json对象的格式
export function cloneToObject(obj: any): any {
  let newObj: any = obj;
  if (obj instanceof Map) {
    return Object.fromEntries(obj);
  }
  if (obj instanceof Object) {
    newObj = {};
    const keys = Object.keys(obj);
    const values = Object.values(obj);
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      const value = values[i];
      newObj[key] = cloneToObject(value);
    }
  }
  if (obj instanceof Array) {
    newObj = [];
    for (let i = 0; i < obj.length; i++) {
      newObj[i] = cloneToObject(obj[i]);
    }
  }
  return newObj;
}

测试工具类：

• 可以看到我们创建了一个复杂的嵌套map对象内容，它仍然能正常的序列化

let lzp = {
  name: "lzp",
  likes: {
    sports: new Map<string, string>([
      ["k1", "v1"],
      ["k2", "v2"],
    ]),
  },
  game: new Map<string, string>([
    ["kk1", "vv1"],
    ["kk2", "vv2"],
  ]),
};

console.log("自定义工具类进行序列化");
console.log(myUtils.stringify(lzp));