JavaScript JSON

JSON是一种数据格式,而不是一种编程语言.

1. 语法

JSON支持3种格式的值:

1. 简单值(字符串,数值,布尔值,NULL,但不能为undefined)
2. 数组
3. 对象

1.1简单值

"JSON"
'json'

JSON 字符串必须使用双引号

1.2 对象

JSON对象的属性必须用双引号包围起来.

与javascript 对象字面量比较,1.JSON没有变量声明,2.最后没有分号.3.属性必须用双引号包围起来.

1.3数组

数组与JS数组使用方法相似.

2. 解析与序列化

JSON可以直接被解析为javascript对象.

2.1 JSON与xml

2.1.1 XML介绍

XML 指可扩展标记语言（EXtensible Markup Language）

XML 是一种标记语言，很类似 HTML

XML 的设计宗旨是传输数据，而非显示数据

XML 标签没有被预定义。您需要自行定义标签。

XML 被设计为具有自我描述性。

XML 是 W3C 的推荐标准

2.1.2 JSON介绍

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。

2.1.3 JSON与XML的比较:

XML的优点:

格式统一，符合标准；

容易与其他系统进行远程交互，数据共享比较方便。

XML的缺点:

XML文件庞大，文件格式复杂，传输占带宽；

服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；

客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；

服务器端和客户端解析XML花费较多的资源和时间。

JSON的优点:

数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；

易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；

支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；

在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；

因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。

2.2 JSON对象

早期解析json 使用 javascript的eval()函数.因为json是JavaScript语法的子集,所以eval()可以解析,解释,并将其作为JavaScript对象和数组返回.

ECMAScript5增加了JSON对象,正式引入了解析JSON的能力.

2.2.1 JSON.stringity()

js对象转化为JSON可以使用 JSON.stringify()

stringify()解析时,会自动跳过函数和原型,值为undefined的属性也会被跳过.

JSON.stingify()可以接收3个参数:

参数1:js对象(代转换的Javascript对象)

参数2:可以是一个数组或一个函数,进行函数过滤.

注意:函数过滤会应用到要序列化的对象所包含的所有对象.因为如果数组中包含多个具有这些属性的对象,则序列化之后的所有对象都会剩下上面的这些属性.

当参数为函数时,使用if-else 注意else return的值不能为undefined,而使用switch-case-default时,default不能为undefined.(不确定)

/*
参数为数组,作用为过滤js对象,如果js对象中的属性名与数组中的值相同,则进行序列化.如果值不同
则忽略.
注意函数过滤会应用到要序列化的对象所包含的所有对象.因为如果数组中包含多个具有这些属性的对象,
则序列化之后的所有对象都会剩下上面的这些属性.
*/
let js={
        number:1,
        boolean:true,
        string:'string',
        array:['string', 'boolean',1],
        object:{
            number:1,
            boolean:true,
            string:'string',
            array:['string', 'boolean',1],
        }
    }
    let json= JSON.stringify(js,['number','object','array'])
    let div=document.getElementsByTagName('div')[0]
    div.innerHTML = json
/*
JSON结果:
{ "number": 1, "object": { "number": 1, "array": [ "string", "boolean", 1 ] }, "array": [ "string", "boolean", 1 ] }
*/
//第二个参数为函数时,该函数有两个参数,分别为原js对象的属性和值.
//原js对象中的属性值对会分别传入函数,进行函数操作.
//当参数为函数时,使用if-else 注意else return的值不能为undefined,而使用switch-case-default时,default不能为undefined.
//return 值为undefined时,表示对该属性不进行序列化
let json1= JSON.stringify(js,(key,value)=>{
        switch(key){
        case "number":return value+1;
        case "boolean":return undefined;
        case "object":return value;
        default: return value;
        }
        })
        let div1=document.getElementsByTagName('div')[1]
    div1.innerHTML = json1
/*
JSON结果:
{ "number": 1, "object": { "number": 1, "array": [ "string", "boolean", 1 ] }, "array": [ "string", "boolean", 1 ] }
*/

参数3:控制缩进和空格.最大缩进值为10大于10的值会自动设置为10.

如果值不是数组,而是字符串时,可以将缩进字符设置为该字符串.

toJSON()方法

可以在要序列化的对象中添加toJSON()方法,序列化会基于这个方法返回适当的JSON表示.

let js={
        number:1,
        boolean:true,
        string:'string',
        array:['string', 'boolean',1],
        object:{
            number:1,
            boolean:true,
            string:'string',
            array:['string', 'boolean',1],
        },
        toJSON:function(){
            return {number:1,boolean:true,string:'string'}
        }
    }
    let json= JSON.stringify(js,['number','object','array'],4)
    let div=document.getElementsByTagName('div')[0]
    div.innerHTML = json
//json结果:{ "number": 1 }

2.2.2 JSON.parse()

将json解析为js对象

JSON.parse有两个参数:

参数1:解析对象

参数2:还原函数

常用于把日期字符串改为Date对象.

let json1= JSON.stringify(js,(key,value)=>{
        switch(key){
        case "number":return value+1;
        case "boolean":return undefined;
        case "object":return value;
        default: return value;
        }
        })
        let div1=document.getElementsByTagName('div')[1]   
        div1.innerHTML = json1
    let jsd=JSON.parse(json1,function(k,v){
        return k=='time'?new Date(v):v
    })
  
    div2=document.getElementsByTagName('div')[2]
    div2.innerHTML= jsd.time
//Thu May 18 2023 17:45:18 GMT+0800 (GMT+08:00)