javascript中的json本文主要介绍了json是什么，json与js中的对象字面量关系，json的解析与序列化以

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」 摘要：本文主要介绍了json是什么，json与js中的对象字面量关系，json的解析与序列化以及json对象属性的删除，各点都附有示例代码以飨读者。

0.json的定义

JSON全称 JavaScript 对象表示法（JavaScript Object Notation），是一种数据格式。是一种结构化数据，和javascript没有什么关系，只不过和js的语法很像。作为传输数据的格式，json也在其它编程语言中广泛使用。json的语法如下：

数据在名称/值对中（key 必须是字符串，且用双引号引起来，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null））
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象示例如下：

{
    k1 : v1,
    k2 : v2
}

1.json与js中的对象字面量

js的对象字面量参考示例如下，可以看到，对象字面量和json的样式很像，但仍有两点不同，一是json不需要声明变量，二是json最后的花括号后面语句结束的分号，其实还有一点就是json中的key必须使用双引号引起来。

//下面为对象字面量
var a1 = {
     width : "100",
     height : "200"
};

2.json中的复杂数据存储

上面我们说过，json中value的值是多种的，这里我们选择两种写下示例，一个是数组，如下代码块1；一个是嵌套json，如下代码块2。

{
    "name" : "susan",
    "class" : "gold",
    "course" : ["math","chemistry","history"]
}

{
    "name" : "susan",
    "class" : "gold",
    "course" : {
        "courseName" : "math",
        "teacher" : "mrsZhang"
    }
}

3.json的解析与序列化

json最方便的一点是，可直接解析为javascript对象，也可将javascript对象序列化为json字符串进行传输，JSON.stringify()和 JSON.parse() 法分别用于实现这两种操作。

3.1 默认情况下，JSON.stringify()会输出不包含空格或缩进的 JSON 字符串，在序列化 JavaScript 对象时，所有函数和原型成员都会有意地在中省略。此外，值为 undefined的任何属性也会被跳过。最终得到的就是所有实例属性均为有效 JSON 数据类型的表示。该函数也可以接受两个可选参数。下面我分别示例下一个参数，有第二个参数，有第三个参数的代码。

3.1.1 有一个参数的示例代码：

var course = {
    courseName : "math",
    teacher : "MrsWang",
    action : function(){
        console.log("this is a function.");
    }
}
var res1 = JSON.stringify(course);
console.log(res1);
//输出结果为{"courseName":"math","teacher":"MrsWang"}

3.1.2 第二个参数是过滤器，用来对序列化的key来做出相应的操作，该参数可以为数组或函数，数组里的值为需要序列化的key，如下代码块1，函数接受两个参数key和value，对特定的key对其value做特定的操作，其它key:value不变，如下代码块2：

var course = {
    courseName : "math",
    teacher : "MrsWang",
    courseTime: "0600",
    action : function(){
        console.log("this is a function.");
    },
}
var res2 = JSON.stringify(course,["courseName"]);
console.log(res2);
//该代码块功能为只取key为courseName的key和value,过滤掉其它的，输出结果为{"courseName":"math"}

var course = {
    courseName : "math",
    teacher : "MrsWang",
    courseTime: "0600",
    action : function(){
        console.log("this is a function.");
    },
}
var res3 = JSON.stringify(course,(key,value)=>{
switch(key){
    case "teacher":
        return value+888;
    default:
        return value;
}
});
console.log(res3);
//该代码块功能为对特定的key对其value做特定的操作，其它key:value不变，输出结果为{"courseName":"math","teacher":"MrsWang888","courseTime":"0600"}

3.1.3 第三个参数为字符串缩进参数，可以控制缩进和空格，这个数为4，表示解析后的json每一级缩进4个字符，示例代码如下：

var course = {
    courseName : "math",
    teacher : "MrsWang",
    courseTime: "0600",
    action : function(){
        console.log("this is a function.");
    },
}
var res4 = JSON.stringify(course,null,4)
console.log(res4);
/*
输出结果为:
{
    "courseName": "math",
    "teacher": "MrsWang",
    "courseTime": "0600"
}
*/

3.1.4 我们也可以自定义对象的序列化方式，使用toJSON()函数来控制它的序列化输出，注意的是，toJSON()输出为简单字符串而非对象，示例代码如下：

var course = {
    courseName : "math",
    teacher : "MrsWang",
    courseTime: "0600",
    action : function(){
        console.log("this is a function.");
    },
    toJSON:function aa(){
        return this.teacher;
    }
}
var res8 = JSON.stringify(course)
console.log(res8);
/*输出结果为"MrsWang"*/

综上所述可以看到，在把对象传给 JSON.stringify()时会执行如下步骤。

 (1) 如果可以获取实际的值，则调用 toJSON()方法获取实际的值，否则使用默认的序列化。
 (2) 如果提供了第二个参数，则应用过滤。传入过滤函数的值就是第(1)步返回的值。
 (3) 第(2)步返回的每个值都会相应地进行序列化。
 (4) 如果提供了第三个参数，则相应地进行缩进。

理解这个顺序有助于决定是创建 toJSON()方法，还是使用过滤函数，抑或是两者都用。

3.2 json的解析方法JSON.parse()方法也可以接收额外的参数，此参数和序列化的过滤器函数是一样的功能，对特定key作对应的操作，示例代码如下：

var course = {
    courseName : "math",
    teacher : "MrsWang",
    courseTime: "0600"
}
var res5 = JSON.stringify(course)
var res6 = JSON.parse(res5, (key,value)=>{
    if(key == "teacher")
        return "MrMa";
    return value;
    });
console.log(res6);
/*输出结果为{ courseName: 'math', teacher: 'MrMa', courseTime: '0600' }*/

4.删除json对象中的属性，示例代码如下：

var course = {
    courseName : "math",
    teacher : "MrsWang",
    courseTime: "0600"
}
delete course.courseName;
var res7 = JSON.stringify(course);
console.log(res7)
/*输出结果为{"teacher":"MrsWang","courseTime":"0600"}*/