码迷,mamicode.com
首页 > Web开发 > 详细

JS 之JSON学习

时间:2016-07-02 17:17:52      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

JSON是一个数据交换格式,由键值对组成,通常被用来当做配置文件,这两天做一套前端笔试题(谈谈你对json的理解),于是决定来认真看一下。其实在很久之前就接触过JSON.stringify()这个方法,把json对象序列化成json字符串,最大的好处就是你可以将一个对象序列化后再alert,你会看的很清楚这个对象的内部结构,但是如果你调试时直接alert这个对象,得到的就是下图

            var val={
                0:"D",
                1:"J",
                2:"L",
                3:"others"
            }
            
            alert(val)                    

技术分享

但是如果你序列化以后,就清楚了

alert(JSON.stringify(val))

技术分享

因为在序列化以后,实际上输出的是一个字符串。当然这里序列化会有很多的限制,大家直接看下面的链接就行

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

其实最终的就是这个函数的第二个参数,是一个可选参数,可以是一个函数,也可以是一个数组

JSON.stringify(value[, replacer [, space]])

当这个参数为一个函数时,就是把要序列化JSON对象的键和值传进去,做一些处理之后,返回一个新的值,所以这个函数的参数是json对象序列化后的‘键和值’。例如:

       var val={
                0:"D",
                1:"J",
                2:"L",
                3:"others"
            }
            
            var json_str=JSON.stringify(val,function(key,val){
                if(key==="3"){
                    return undefined
                }
                return val;
            });
            console.log(json_str+"   " + typeof json_str);

技术分享

得到的结果如上图,可见当key==="3"时,返回的是undefined,就会忽略这个键值对,而不会出现在序列化的结果中。

当然你也可以通过传入一个数组实现相同的功能,如果序列化对象中的键没有出现在数组值中,那么这个键值对就会被忽略。例:

       var val={
                0:"D",
                1:"J",
                2:"L",
                3:"others"
            }
            
            var json_str=JSON.stringify(val,function(key,val){
                if(key==="3"){
                    return undefined
                }
                return val;
            });
            console.log(json_str+"   " + typeof json_str);
            
            var json_str2=JSON.stringify(val,["0","1","2"]);
            console.log(json_str2+"   " + typeof json_str2);

 

技术分享

可见两个达到了相同的效果。

 

toJSON 方法

如果一个被序列化的对象拥有 toJSON 方法,那么该 toJSON 方法就会覆盖该对象默认的序列化行为:不是那个对象被序列化,而是调用 toJSON 方法后的返回值会被序列化,例如:

var obj = {
  foo: ‘foo‘,
  toJSON: function () {
    return ‘bar‘;
  }
};
JSON.stringify(obj);      // ‘"bar"‘
JSON.stringify({x: obj}); // ‘{"x":"bar"}‘

 

JSON.parse 方法

很显然就是反序列化,把一个json字符串,转换成json对象

 

使用 JSON.stringify 结合 localStorage 的例子

一些时候,你想存储用户创建的一个对象,并且,即使在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify 适用于这种情形的一个样板:

// 创建一个示例数据
var session = {
    ‘screens‘ : [],
    ‘state‘ : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});

// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem(‘session‘, JSON.stringify(session));

// 然后是如何转换通过 JSON.stringify 生成的字符串,该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem(‘session‘));

// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

 

参考链接:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

https://developer.mozilla.org/zh-CN/docs/Using_native_JSON#The_replacer_parameter

https://developer.mozilla.org/zh-CN/docs/JSON

 

 

 

JS 之JSON学习

标签:

原文地址:http://www.cnblogs.com/djlxs/p/5635641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!