使用jQuery / JS序列化Map对象

Question

[这是关于SO的第一个问题，所以对任何错误道歉]

我试图在Cookie中保存地图，如下图所示。

var myMap = new Map();
myMap.set("k1", {
    a1: "...",
    a2: "...",
    a3: "..."
});

为此，我必须格式化为JSON。我尝试了很多方法，比如：

$.toJSON(myMap)
$.param(myMap)
JSON.stringify(myMap)

但它们似乎都不起作用......

所以，我这样做了：

var serial = [];
myMap.forEach(function(value){
    serial.push(value);
});
var result = $.toJSON(serial)

（必须在解码JSON时重建密钥......）

有一种更好的方法来序列化Map对象吗？

Answer 1

不完全是典型的＆＃34; stringify＆＃34;，但您可以使用扩展运算符与JSON.stringify()结合使用，这将为您提供数组...

var myMap = new Map();
myMap.set("k1", { a1: "...", a2: "...", a3: "..." });
myMap.set("k2", { b1: "...", b2: "...", b3: "..." });

var myJSON = JSON.stringify([...myMap]);
alert(myJSON);

这会给你......

[["k1",{"a1":"...","a2":"...","a3":"..."}],["k2",{"b1":"...","b2":"...","b3":"..."}]]

再次将其转换为地图......

var recoveredMap = new Map(JSON.parse(myJSON));

Answer 2

如果想要对即时地图进行字符串化，那么扩散算子很好，如果它们嵌套在任何数据结构中，你将面临问题。

JSON.stringify和JSON.parse都支持回调函数：

JSON.stringify(value[, replacer[, space]])
JSON.parse(text[, reviver])

所以你可以编写如下函数：

function replacer (key, value){
    if (value.__proto__ == Map.prototype) {
        return {
            _type: "map",
            map: [...value],
        }
    } else return value;
}

function reviver (key, value){
    if (value._type == "map") return new Map(value.map);
    else return value;
}

现在，无论嵌套的深度如何，您都可以轻松地对字符串进行字符串化/解析：

let obj = {
    map: new Map([
        [1, new Map([
            [1,2],
            [3,4],
        ])],
        [2,3],
    ]),
};
console.log(obj);
let str = JSON.stringify(obj, replacer);
console.log(str);
console.log(JSON.parse(str));
console.log(JSON.parse(str, reviver));

Answer 3

使用Array.from将Map转换为数组怎么办

// initialize the map
var myMap = new Map();
myMap.set("k1", {
  a1: "...",
  a2: "...",
  a3: "..."
});
myMap.set("k2", {
  a1: "...",
  a2: "...",
  a3: "..."
});


// serialize the map by converting it to an array
var mapAsArray = Array.from(myMap);
console.log('Map as array ',mapAsArray);

var serializedMap = JSON.stringify(mapAsArray);
console.log(serializedMap)

// deserialize into a new map
var map = new Map(JSON.parse(serializedMap))
console.log(map.size)

Answer 4

有一个新的JS功能-Object.fromEntries。它可以将地图解析为对象

const obj = {a: 1, b: 2}
const map = new Map(Object.entries(obj))
const objectCopy = Object.fromEntries(map)

兼容性正常（Chrome，FF，Safari），并且存在polyfill。由于fromEntries是“第4阶段”提案（已批准），因此我们也可以期望兼容性会扩展到所有浏览器。
请参阅兼容性