ES6中的Map与JSON的相互转化(序列和持久化)


发布者 ourjs  发布时间 1440410176998
关键字 JS学习  JavaScript 
当你需要存一些键值对数据时,然后你不知道key是哪些对象类型。你最好把他们存在Map中,这比存在Object中好些。

注* Map支持任意类型如Object作为key; 目前JSON.stringify和JSON.parse并不支持Map;

1. 将Map对象转化成为二维数组


如果Map的key包含Object类型的数组,我们可以把它编码成二维数组键值对。

1.1. 将Map和数组对相互转化


这个扩展操作符(三个点)可以让你将Map转化成数组对。

> let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
> [...myMap]
[[true, 7], [Object { foo=3}, ["abc"]]]


然后你可以直接用二维数组来构造Map

> new Map([[true, 7], [{foo: 3}, ['abc']]])
Map {true => 7, Object {foo: 3} => ['abc']}

1.2 与JSON的相互转化


有了与JSON相互兼容的二维数组,就可以将其与JSON进行相互转化

function mapToJson(map) {
    return JSON.stringify([...map]);
}

function jsonToMap(jsonStr) {
    return new Map(JSON.parse(jsonStr));
}

下面的代码显示了完成的示例

> let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
> mapToJson(myMap)
'[[true,7],[{"foo":3},["abc"]]]'
> jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
Map {true => 7, Object {foo: 3} => ['abc']}


2. 通过objects将Map序列化为JSON


如果你的Map只包含string类型的key, 你可以将它转化成Object再编码

2.1 将Map和object进行相互转化


下面的代码将Map和object进行相互转化

function strMapToObj(strMap) {
    let obj = Object.create(null);
    for (let [k,v] of strMap) {
        // We don’t escape the key '__proto__'
        // which can cause problems on older engines
        obj[k] = v;
    }
    return obj;
}

function objToStrMap(obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
    }
    return strMap;
}

然后把他们结构起来使用

> let myMap = new Map().set('yes', true).set('no', false);
> strMapToObj(myMap)
{ yes: true, no: false }
> objToStrMap({yes: true, no: false})
[ [ 'yes', true ], [ 'no', false ] ]

2.2 再把它们与JSON相互转化

function strMapToJson(strMap) {
    return JSON.stringify(strMapToObj(strMap));
}

function jsonToStrMap(jsonStr) {
    return objToStrMap(JSON.parse(jsonStr));
}


最终代码

> let myMap = new Map().set('yes', true).set('no', false);
> strMapToJson(myMap)
'{"yes":true,"no":false}'
> jsonToStrMap('{"yes":true,"no":false}');
Map {'yes' => true, 'no' => false}





回复 (2)
微信扫码 立即评论