JS 之JSON学习

Posted 2020-08-02 DJL箫氏

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