美文网首页JavavaJWeb前端之路饥人谷技术博客
JavaScript 中 Map 与 JSON 转换的坑

JavaScript 中 Map 与 JSON 转换的坑

作者: iHelin | 来源:发表于2017-03-09 19:54 被阅读579次

用js的Map的时候发现了里面的一个小坑(也许是Java的惯性思维),在将Map转成字符串的时候会以数组字面量的形式保存。
先构造一个Map,如下

const map = new Map();
map.set(1, 1);
map.set(2, 2);
console.log(map);

结果如图:


Paste_Image.png

好的,没问题,当做如下转换:

console.log(JSON.parse(JSON.stringify(map)));

结果意外发生了

Paste_Image.png
这个Map变成了一个二维数组,(key对应下标0,value对应下标1)。
那么如何还原为Map呢?

1.遍历

这是一种比较的方式,代码如下:

const map = new Map();
let jsonStr = '[[1,1],[2,2]]';
let values = JSON.parse(jsonStr);
for (let i in values) {
  map.set(values[i][0], values[i][1]);//注意这里取的是下标0和1
}
console.log(map);

2.构造器

翻看es6手册发现其构造函数可以接受一个二维数组作为参数,该数组的成员是表示键值对的数组,这正是我们想要的方式。因此,可以这样去构造Map:

let jsonStr = '[[1,1],[2,2]]';
const map = new Map(JSON.parse(jsonStr));
console.log(map);

输出结果如下:


Paste_Image.png

两种方式都可以得到我们想要的结果。

参考文档:阮一峰 ECMAScript 6 入门;

相关文章

网友评论

  • larryzhao:用 object 应该就没有这个问题了
    larryzhao:@iHelin 是的,挺有意思的
    iHelin:嗯,主要是发现Map的转换有点‘特殊’:smile:

本文标题:JavaScript 中 Map 与 JSON 转换的坑

本文链接:https://www.haomeiwen.com/subject/pegxwttx.html