OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1440410176998
注意 转载须保留原文链接,译文链接,作者译者等信息。  
当你需要存一些键值对数据时,然后你不知道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}

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Node.js中的通用基础设计模式
  2. 请停止将JavaScript类型化(建议不要使用class实现类继承)
  3. WowJS:在滚动页面时添加动画效果的简单实现
  4. JavaScript正在变成Web界的C++
  5. 闪客时代开始被HTML5慢慢终结:Facebook首席安全官号召设定正式消灭Flash的期限
  6. 纽约时报使用Html5 WebRTC记录访问者IP地址
  7. 在Debian/Ubuntu上面安装升级nginx到最新版
  8. 用jQuery和JavaScript深度复制JSON对象的方法
  9. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 用jQuery和JavaScript深度复制JSON对象的方法
  2. Node.js中的通用基础设计模式
  3. WowJS:在滚动页面时添加动画效果的简单实现
  4. [PPT]JavaScript初级教程
  5. JavaScript中的哈希表(Hash Maps的最佳实践)
  6. 我是怎么从顾虑到热爱ReactJS的(与AngularJS经典MVC数据绑定的对比)
  7. JSON序列化(stringify)对象时排除某些属性的两种方法
  8. JavaScript变量作用域(Variable Scope)和闭包(closure)的基础知识
  9. 用jQuery为跳转链接锚点添加平滑滚动动画效果(如回到顶部按钮)
  10. 用纯css改变下拉列表select框的默认样式

 关键字 - JavaScript
  1. 如何用CSS将select/option文本居中或居右对齐
  2. 你用什么代码编辑工具开发JavaScript?
  3. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  4. 40行JavaScript代码实现的3D旋转魔方动画效果
  5. 使用Javascript将相对路径地址转换为绝对路径
  6. 给checkbox选择框设置不选中时的值
  7. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  8. JavaScript中怪异的地方
  9. 在JavaScript中创建命名空间的几种写法
  10. JavaScript中的继承,构造函数以及new关键字的作用

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号