说明

XML，类似于HTML标签语言，只是标签是自定义标签

比如小程序的配置，基本都是JSON格式

语法

基本

轻量级的数据交换格式，UTF-8，字符串规定必须用双引号” “，Object的键也必须用双引号” “，数值、布尔值、null不用加。

.json 文件最顶层，支持3种形式的数据：

简单值
对象值
数组值

注释

不支持注释，没有任何注释相关

================

JSON序列化

JSON 对象

================

转换成JSON（stringify）

1、基本使用

{
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
//对象转换成json字符串
var s = JSON.stringify(xiaoming);
/*
{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}
*/

2、第二个参数（过滤、批处理）

第二个参数用于控制如何筛选对象的键值

// 如果我们只想输出指定的属性，可以传入Array数组；
JSON.stringify(xiaoming, ['name', 'skills'], );
/*
{"name": "小明","skills": ["JavaScript","Java","Python","Lisp"]}
*/
// 或者传入函数，对键和值进行处理
JSON.stringify(xiaoming, (key,value)=>{
  if(key === "age"){
    return value + 1
  }
  return value 
  // 一定要返回value相关
  // 返回 undefined 会导致属性被忽略。
});
/*
{"name":"小明","age":15,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}
*/

3、第三个参数 （缩进）

第三个参数控制显示的缩进，对每个属性进行换行，然后前面加上 x 个空格。

最大缩进值 x 为 10，大于 10 的值会自动设置为 10。

// 要输出得好看一些，可以加上参数，按缩进输出：
JSON.stringify(xiaoming, null, 2);
/*
{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}
*/

如果你输入的是字符串，前面的缩进空格就会变成你输入的字符串

4、自定义转化规则

如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据：

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};
JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

注意，箭头函数不能用来定义 toJSON()方法。主要原因是箭头函数的词法作用域是全局作用域，在这种情况下不合适。

toJSON()方法可以与过滤函数一起使用，因此理解不同序列化流程的顺序非常重要。

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

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

函数转换JSON

应该避免在 JSON 中使用函数，函数会失去其作用域，而且您还需要使用 eval( ) 将它们转换回函数。

<script>
    var obj = { name: "Bill Gates", age: function () {return 62;}, city: "Seattle" };
    obj.age = obj.age.toString();
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON;
</script>

=================

JSON转换成对象

1、基本使用

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

2、第二个参数 （批处理）

var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});
// {name: '小明同学', age: 14}

特别

1、JSON 中不允许日期对象

如果您需要包含日期，请写为字符串。

之后您可以将其转换回日期对象：

<script>
    var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
    var obj = JSON.parse(text);
    obj.birth = new Date(obj.birth);
    document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>
//或者用JSON.parse()的第二个参数，是一个处理函数
<script>
var text = '{"name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

2、JSON 中不允许函数

如果您需要包含函数，请把它写作字符串。

稍后您可以把它转换回函数：

<script>
    var text = '{"name":"Bill Gates", "age":"function() {return 62;}", "city":"Seattle"}';
    var obj = JSON.parse(text);
    obj.age = eval("(" + obj.age + ")");  
    //eval()是把括号内的字符串当做js语句来使用。如果要直接运行函数，需要加()括号
    document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

3、undefined

如果是 undefined，则结果中就会删除相应的键。

================

其他应用

1、简单的深拷贝

直接把一个值转成JSON，然后再转回来，可以实现简单的深拷贝。

但是有问题：
1、函数不行，函数默认转化成JSON是被移除的。
2、undefined也不行，也是被移除
3、Symbol也不行，也是被移除