JSON的那些事儿（你真的了解JSON吗）

前言

差不多一周没有写博客，这篇博客的内容是自己前几天就看的了。按照道理应该几天前就分享出来，不过最近因为准备期末考试的原因，就耽误了。今天趁着周六，难得的睡到8点多起床，在这里总结一下，迎接这个愉快而充实的周末。

什么是JSON

我们来看看MDN怎么说的

JSON对象包含用于解析 JavaScript Object Notation (JSON) 的方法，并将值转换为 JSON。它不能被调用或者作为构造函数，除了它的两个方法属性，它本身并没有有趣的功能。

在定义中，我们可以明确的知道JSON是一个对象，但是我们在平时说的时候却从来没有说JSON是一个对象，主要原因是因为我们平常说的JSON实际上是经过JSON对象解析过的值，也就是JSON字符串，像下面我们熟悉的这样：

'{"name":"xiaoD", "age":21}'

我们平时说的JSON属性是我们将JSON字符串转化为JavaScript对象后的属性，也就是上面的name和age。

JSON和JavaScript对象的关系

在网上我看到很多人讨论是否需要对JSON的属性添加双引号。出现这样的讨论，主要原因是因为他们并没有了解JSON和JavaScript对象的关系。大多数人都认为JSON就是JavaScript对象，所以抛出了下面的代码，并振振有词的说JSON属性可以添加双引号，也可以添加单引号，也可以不添加

var person = {
    name: "xiaoD",
    age: 21
};
console.log(typeof person) //object
var person2 = {
    'name': "xiaoD",
    'age': "xiaoD"
};
console.log(typeof person2); //object
var person3 = {
    'name': "xiaoD",
    'age': "xiaoD"
};
console.log(typeof person3); //object

我想说你上面定义的根本不是JSON，而是JavaScript对象。JSON在JavaScript中表现的就是一个字符串！！！下面的才是我们说的JSON

var JSONperson =  '{"name":"xiaoD", "age":21}';

你试着把这里的双引号删除或者修改为单引号试试看？控制台会告诉你真相…

JSON中的两个方法

1、stringify

这个方法很多人都使用过，就是把JavaScript对象转化为JSON字符串（我们平时说的JSON）。我们看看下面的代码

var person = {
    name: "xiaoD",
    age: 21
};
var JSONperson= JSON.stringify(person);
console.log(JSONperson);// {"name":"xiaoD","age":21}
console.log(typeof JSONperson)// string

但事实上，这个方法还有过滤的功能

var person = {
    name: "xiaoD",
    gender: "boy",
    hobby: "read",
    age: 21,
};
//指定我们需要的属性
var JSONperson = JSON.stringify(person, ["name", "gender"]);
console.log(JSONperson); //  {"name":"xiaoD","gender":"boy"}

既然第二个参数可以传入数组，那么我们传入一个函数看看会有什么效果

var person = {
    name: "xiaoD",
    gender: "boy",
    hobby: "read",
    age: 21,
};
//这里的key就是我们的属性名，value就是属性值
var JSONperson = JSON.stringify(person, function(key, value) {
    switch(value) {
        case "boy":
            return "男"
        default: 
            return value;
    }
});
console.log(JSONperson);//{"name":"xiaoD","gender":"男","hobby":"read","age":21}

以为这样就完了？其实还有最厉害的参数没有使用，那就是第三个参数的字符串缩进长度。我们经常console一个JSON的时候，会所有都混合在一起，看起来很难受，但是如果我们使用缩进，就会让数据显得清晰

var person = {
    name: "xiaoD",
    gender: "boy",
    hobby: "read",
    age: 21,
};
var JSONperson = JSON.stringify(person, function(key, value) {
    switch(value) {
        case "boy":
            return "男"
        default: 
            return value;
    }
}, 6);
console.log(JSONperson); 

控制台显示如下

{
      "name": "xiaoD",
      "gender": "男",
      "hobby": "read",
      "age": 21
}

但是需要注意的是我们设置的缩进值最后取的真实值是min(space, 10)。当然你也可以不用空格缩进，采用字符串也可以，但是需要注意的这里字符串长度超过10也只取前10位。

当然我们在定义对象的时候，里面可以有一个toJSON方法，也可以充当过滤的作用，但是个人认为用处不大，这里就不总结了。

2、parse

这个方法是将JSON字符串转化为JavaScript对象，代码如下

var JSONperson =  '{"name":"xiaoD", "age":21}';
var person = JSON.parse(JSONperson);
console.log(typeof person); // object

在解析的时候，我们同样可以进行过滤操作

var JSONperson = '{"name":"xiaoD","gender":"boy","hobby":"read","age":21}';
var person = JSON.parse(JSONperson, function(key, value) {
    if(value === 'boy') {
        return "男";
    }else{
        return value;
    }
});
console.log(person); //{name: "xiaoD", gender: "男", hobby: "read", age: 21}

（完）