转换的艺术:如何在JavaScript中序列化Map为Object及逆向操作
Map不能直接被JSON.stringify()序列化,需要先转成对象。因为JSON.stringify()方法仅能处理纯JSON数据结构,而Map是一个特殊的集合类型,它不能直接对应于JSON的任何数据结构。
将Map转换为可以被JSON.stringify()序列化的对象,可以遍历Map的所有键值对,并将它们添加到一个普通对象中。
实现一个mapToJson的方法:
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
myMap.set('key3', 'value3');
function mayToJson(map) {
const obj = {};
for(let [key, value] of map) {
obj[key] = value;
}
return JSON.stringify(obj)
}
console.log(mayToJson(myMap))// {"key1":"value1","key2":"value2","key3":"value3"}
将JSON字符串解析成Map对象,接受一个JSON字符串,将其解析为一个对象,然后创建一个新的Map实例,并将对象的每个属性添加到Map中。这样就可以恢复原始的Map数据结构。
实现一个jsonToMap的方法:
function jsonToMap(jsonStr) {
const obj = JSON.parse(jsonStr);
const map = new Map();
for(let key in obj) {
if(obj.hasOwnProperty(key)) {
map.set(key, obj[key]);
}
}
return map;
}
const str = '{"key1":"value1","key2":"value2","key3":"value3"}';
const myMap = jsonToMap(str);
console.log(myMap)
// Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }
如何处理Map中值为对象的情况?
const myMap = new Map()
myMap.set('key1', {a:1, b:2})
myMap.set('key2', {x: 10, y: 20})
myMap.set('key3', {name: 'summer', age: 18})
function mapToJson(map) {
const obj = {}
for(let [key, value] of map) {
obj[key] = (value instanceof Map) ? mapToJson(value) : value
}
return JSON.stringify(obj)
}
const jsonString = mapToJson(myMap)
console.log(jsonString) // {"key1":{"a":1,"b":2},"key2":{"x":10,"y":20},"key3":{"name":"summer","age":18}}
Map里嵌套Map如何处理?
function jsonToMap(jsonStr) {
const obj = JSON.parse(jsonStr);
const map = new Map();
for(let key in obj) {
if(obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
map.set(key, jsonToMap(JSON.stringify(obj[key])));
} else {
map.set(key, obj[key]);
}
}
}
return map;
}
const str = '{"key1":"value1","key2":{"nestedKey1":"nestedValue1","nestedKey2":"nestedValue2"}}'
const myMap1 = jsonToMap(str);
console.log(myMap1)
// Map(2) {
// 'key1' => 'value1',
// 'key2' => Map(2) {
// 'nestedKey1' => 'nestedValue1',
// 'nestedKey2' => 'nestedValue2'
// }
// }
原文地址:https://blog.csdn.net/friend_ship/article/details/144041369
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!