《JavaScript高级程序设计》第20章:JSON

《JavaScript高级程序设计》第20章:JSON

JSON

20.1. 语法

JSON的语法可以表示一下三种类型的值:

  • 简单值:可在JSON中表示字符串、数值、布尔值、和null。但是JSON不支持JS中的特殊值undefined
  • 对象:
  • 数组

20.1.1 简单值

JS字符串与JSON字符串最大的区别在于,JSON字符串必须使用双引号将属性包裹,单引号会导致语法错误

在实际应用中,JSON更多用来表示更复杂的数据结构。

20.1.2 对象

JSON中的对象和JS字面量优点不同

JS对象字面量:

var person = {
    name:"Nicholas",
    age:29
};

JSON中的对象要求给属性加上引号。JS中设置对象的时候也可以为属性值加行引号

JS:
var person = {
    ”name“:"Nicholas",
    “age”:29
};

JSON:
{
    "name":"Nicholas",
    "age":29
}

不同之处:

  • JSON没有声明变量(JSON中没有变量的概念)
  • 没有末尾的分号(这不是JS语句,不需要分号)
  • 对象的属性必须加上双引号,这在JSON中是必须的

JSON中的对象
JSON中的对象的属性名也要添加双引号

{
    "name":"Nicholas",
    "age":29,
    "school":{
        "name":"Merrimack College",
        "location":"North Andover , MA"
    }
}

20.1.3 数组

在这里插入图片描述

为什么这里的`edition`属性没有添加双引号???
~~
也许,JSON中的双引号设定只存在于数据结构的第一层,如果存在数组/对象的嵌套,嵌套的对象不必为属性值添加双引号
~~
这里根本就是一个JS数组

20.2. 解析和序列化

JSON之所以流行,是因为可以把JSON数据结构解析为有用的JS对象。通过JS对象,可以很方便地调用其中的数据。

相比eval()方法,JSON的stringify()parse()方法更加复杂,可以通过回调函数对其中的数据进行筛选。

20.2.1 JSON对象

JSON对象有两个方法:

  • stringify():将JS对象序列化为JSON字符串
  • parse():将JSON字符串解析为原生JS值

问题:为什么不使用eval()解析JSON?
答案:安全性!对于JSON字符串,parse()只是单纯解析数据,而eval()会将字符串中的执行语句一并执行。如果JSON字符串中有恶意代码,使用eval()就会将这些恶意代码执行,而parse()就不会。并且,使用eval()要更复杂些:eval("("+jsonStr+")"),需要将JSON字符串用一个括号包裹。

参考:https://blog.csdn.net/shehun11/article/details/48826825

var jsonText = JSON.stringfy(book); // book是一个js对象

默认序列化输出的JSON字符串不包含任何空格字符或缩进。在序列化JS对象时,所有函数及原型成员都会被有意忽略,不体现在结果中。此外,值为undefined的任何属性也都会被跳过。结果中最终都是值为有效JSON数据类型的实例属性。

var bookCopy  = JSON.parse(JSONText);

通过parse方法可以得到响应的JS值,上面的代码可以创建book类似的对象

注意:虽然book与bookCopy具有相同的属性,但它们两个是独立的、没有任何关系的对象。

问题:既然book与bookCopy并非简单的饮用的复制,通过parse方法是否可以实现对象的深拷贝?
答案:可以,但是只能是那些没有函数和undefined的简单的对象。

参考:简单的 JSON 对象进行深拷贝最简单的方法

20.2.2 序列化选项

JSON.stringify除了要序列化的JS对象外,还可以接受另外两个参数,用于指定以不同的方式序列化JS对象。

第一个参数是个过滤器,可以是一个数组,也可以是一个函数;

第二个参数是一个选项,表示是否在JSON字符串中保留缩进

  • 过滤结果:
var jsonText = JSON.stringify(book,["title","addition"]);

第二个数组参数中的两个字符串是与将要序列化的对象中的属性是对应的,在返回的结果字符串中,就只会包含着两个属性

如果第二个参数是函数,传入的函数接受两个参数:属性名和属性值。函数的返回值就是相应键的值,如果函数返回了undefined,那么相应的属性会被忽略

var jsonText = JSON.stringify(book,function (key,value){})
  • 字符串缩进
var jsonText  =  JSON.stringify(book,null,4);
//  在每个级别缩进4个空格,并且也在结果字符串中插入了换行符以提高可读性。

最大缩进空格数为10,所有大雨10的值都会自动转换为10

也可以降缩进字符设置为制表符或其他任意字符

    var jsonText = JSON.stringify(book,null," - - ");

在每行前面都会插入“ - - ”

  • toJSON()方法

stringify序列化的内部顺序:

  1. 如果存在toJSON()方法而且能通过它取得有效值,则调用该方法,否则,按照默认顺序执行序列化
  2. 如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第(1)步返回的值
  3. 对第(2)步返回的每个值进行相应的序列化。
  4. 如果提供了第三个参数,执行相应的格式化

使用:

var book = {
    "title":"Professional JavaScript",
    "authors":[
        "Nicholas C. Zakas"
    ],
    edition:3,
    year:2011,
    toJSON:function(){
        return this.title;
    }

};

toJSON方法定义在将要序列化的对象内部,在调用JSON.stringify()方法的时候会自动检测执行

 let jsonObj = {
        name : "Linya",
        age:21,
        sex:"man",
        getName(){
            return this.name;
        },

        toJSON(){
            return this.name;
        }

    };

    let test1 = JSON.stringify(jsonObj,(key,value)=>{
        console.log("key:", key, "value:", value);
        return Math.ceil(Math.random()*10);
    });
    console.log(test1);

在这里插入图片描述
toJSON的返回值作为回调函数的value参数传入,key为空。
回调函数的返回值作为JSON对象序列化的结果。

20.2.3 解析选项

JSON.parse()方法可以接受一个函数,将在每个键值对上调用。区别于JSON.stringify()接受的过滤函数,这个函数被称为还原函数。但实际上这两个函数的签名是相同的——它们都接收两个参数,一个键和一个值,而且都需要返回一个值。

如果函数返回undefined,则表示要从结果中删除对应的键;如果返回其他值,则将该插入结果中。在将日期字符串转换为Date对象时,经常要用到还原函数

var bookCopy = JSON.parse(jsonText,function(key,value){
    if(key == "releaseDate"){
        return new Date(value)
    }else{
        return value;
    }
})

应该是无法向其中添加新的属性的吧

浏览器支持

IE8+,Firefox 3.5+,Safari 4+,Opera 10.5和Chrome

问题:

   var book = {
        "title":"Professional JavaScript",
        "authors":[
            "Nicholas C. Zakas"
        ],
        "edition":3,
        "year":2011,
    };

    let str1 = JSON.stringify(book,function(key,value){
         console.log("test1:",key);
        switch(key){

            case "authors":
                return undefined;
            case "edition":
                return 456;
            default:{
                console.log("test2:",value);
                return 123;
            }

        }
    }," - - ");
    console.log("test3",str1);

    let str2 = JSON.parse(str1);
    console.log("jsonText",str2);

在这里插入图片描述

default返回123,想要将其余属性值都设置为123,但是失败了.

  • 还原函数只执行了一次console.log(key),并且输出为空
  • default:return 123使结果字符串为123
  • default中返回value之外的其他值,会将整个结果置为这个值

结论:
参考
遍历顺序:

  1. key:’’,value:{“整个对象”}
  2. key:“title”,value:“Professional JavaScript”
  3. key:“authors”,value:[“Nicholas C. Zakas”]
  4. key:“edition”,value:3
  5. key:“year”,value:2011

第一次遍历过程中key:"",对应的value是整个对象。之后的遍历应该都是基于此。
我在第一次遍历的时候执行default:return 123 ==》 key:"",value:123,更改了整个遍历的基础,后面的遍历无法进行。

So:switch语句,default条件,为了避免遍历出错,一律返回value

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值