Javascript JSON

作者: Sue1024 | 来源:发表于2018-04-01 12:13 被阅读85次

    JSON只是一种字符串数据格式,使用它的不仅仅是Javascript。

    语法

    JSON可以表示三种类型的值:简单值、对象、数组

    简单值

    以下是JSON可以辨识的简单值例子:

    5
    "Hello World!"
    false
    null
    

    *注意:

    1. undefined不被支持
    2. 字符串必须使用双引号,单引号会导致语法错误

    对象

    在Javascript中,我们可以用对象字面量的方式创建一个对象:

    var person = {
        name: "Sue",
        age:  "18"
    }
    

    但JSON要求给属性加双引号,上述对象转换成合法的JSON字符串格式:

    {
        "name": "Sue",
        "age":  "18"
    }
    

    *注意:

    1. 属性加双引号
    2. 没有变量声明
    3. 没有末尾分号
    4. 属性的值可以是前面介绍的简单值,也可以是对象或数组
    5. 2、3点同样适用于简单值和数组

    数组

    在Javascript中,我们可以创建一个如下数组:

    var names = ["Sue", "Jane", "Ben"]
    

    上述数组转换成合法的JSON字符串格式:

    ["Sue", "Jane", "Ben"]
    

    我们可以将数组、简单值、对象嵌套使用,创建更加复杂的JSON字符串,比如:

    {
        "teachers": [
            { "name": "Sue", "age": 18, "students": [1, 45, 60]},
            { "name": "Ben", "age": 25, "students": [2, 31, 40]}
        ],
        "students": [
            { "id": 1, "name": "Jane"},
            { "id": 2, "name": "Lee"}
        ]
    }
    

    解析与序列化

    在JSON之前,web传输格式化数据都是使用XML,Javascript要想拿到XML中的数据,要先将其转换成DOM,而后从中提取数据,相比之下,JSON就显得非常简单。

    eval

    早期解析JSON一般使用eval(),比如:

    eval({"name": "Sue"})
    {name: "Sue"}
    

    但这种方式存在风险,因为服务器返回的数据很有可能存在恶意代码,只要被解析成合法的Javascript语法,就会被执行,比如:

    eval("alert('Sue')")
    

    因此不建议使用eval()来解析JSON字符串。
    早期浏览器中,可以使用https://github.com/douglascrockford/JSON-js来解析JSON字符串。

    JSON对象

    在IE 8+、 Firefox 3.5+、 Safari 4+、 Chrome、Opera 10.5+中,ECMAScript定义了全局对象JSON。

    stringify

    用于把Javascript对象序列化为JSON字符串。
    *注意:

    1. 值为undefined的属性会被忽略
    2. 函数及原型成员会被忽略
    3. 不包含缩进和空格字符(比如逗号后的空格)

    举个例子:

    function Person(name, secret) {
        this.name = name;
        this.secret = secret;
        this.makeFriends = function() {
            return this.secret;
        }
    }
    Person.prototype.sayHi = function() {
        return this.name;
    }
    var me = new Person("Sue", undefined)
    me.makeFriends()
    // undefined
    me.sayHi()
    // "Sue"
    var meJSON = JSON.stringify(me);
    // "{"name":"Sue"}"
    

    上述例子中,我们创建了一个Person实例me,其中secret属性为undefined,包含makeFriends方法和一个原型成员sayHi,这些都没有被添加到生成的JSON字符串中。
    这个方法可以使我们不必在乎Javascript语法与JSON语法的差异,尽管创建合法的Javascript对象。

    parse

    用于把JSON字符串序列化为Javascript值。

    var meCopy = JSON.parse(meJSON)
    // {name: "Sue"}
    

    *注意:memeCopy是两个独立的对象,实际编程中,可以使用stringify parse实现对象的拷贝。

    stringify 选项

    JSON.stringify()的第一个参数是要序列化的对象,后面还可以加两个参数,分别是过滤器和选项。

    1. 过滤器
      过滤器可以是数组,也可以是函数,如果是数组,JSON.stringify()的结果中将保留数组中的属性,比如:
    function Person(name, age, secret) {
        this.name = name;
        this.age = age;
        this.secret = secret;
    }
    var me = new Person("Sue", 18, "none");
    var meJSON = JSON.stringify(me, ["name", "age"])
    meJSON
    // "{"name":"Sue","age":18}"
    

    如果过滤器是一个函数,会给这个函数传入两个参数,分别是属性名和属性值,根据需要返回要添加到JSON中的属性值,如果为undefined,会移除该属性,比如:

    var me = new Person("sue", 25, ["girl", "1024", "Beauty"])
    function process(key, value) {
        switch(key) {
            case "name":
                return value.charAt(0).toUpperCase() + value.slice(1);
            case "age":
                return 18;
            case "secret":
                return undefined;
            default:
                return value;
        }
    }
    var meJSON = JSON.stringify(me, process)
    meJSON
    // "{"name":"Sue","age":18}"
    
    1. 字符串缩进
      第三个参数用于控制结果中的缩进和空白符,如果这个参数是一个数值,那么它表示每个级别缩进的空格数,比如:
    var meJSON = JSON.stringify(me, process, 4)
    undefined
    meJSON
    "{
        "name": "Sue",
        "age": 18
    }"
    

    *注意:

    1. 只要传入了缩进数,结果就会包含换行符,因为只缩进却不换行没什么意义。
    2. 最大缩进为10,如果超过10, 转换为10

    如果第三个参数是一个字符串,那么将使用这个字符串作为缩进,这个字符串可以是制表符或其他任意字符,如果超过10位,则仅前10位有效,比如:

    var meJSON = JSON.stringify(me, process, "\t")
    meJSON
    "{
        "name": "Sue",
        "age": 18
    }"
    
    var meJSON = JSON.stringify(me, process, "****")
    meJSON
    "{
    ****"name": "Sue",
    ****"age": 18
    }"
    
    1. toJSON
      当需要为某种对象添加自定义的序列化方法时,可以给对象定义toJSON()方法,比如:
    Person.prototype.toJSON = function() {
        return this.name;
    }
    var me = new Person("sue", 25, ["girl", "1024", "Beauty"])
    JSON.stringify(me, process, "\t")
    // ""sue""
    

    上述例子中,我们在Person的原型中添加了toJSON方法,发现调用JSON.stringify时,只序列化了name属性。
    序列化的内部顺序如下:
    No. 1 如果存在toJSON(),而且它能返回有效的值,则调用它,否则,返回对象本身
    No. 2 如果提供了过滤器参数,则基于第一步返回的值调用过滤器
    No. 3 序列化第二步的返回值
    No. 4 如果提供了缩进,则格式化第三步的返回值

    parse 选项

    JSON.parse()可以接收第二个参数,这个参数是一个还原函数,将在每个键值对上调用,这个函数接收两个参数,分别是键和值,返回处理过的值,比如:

    var birth = new Date(1993, 10, 24)
    JSON.stringify(birth)
    // ""1993-11-23T16:00:00.000Z""
    var birthJSON = JSON.stringify(birth)
    var birthCopy = JSON.parse(birthJSON, function(key, value) {
        return new Date(value)
    })
    birthCopy.getFullYear()
    // 1993
    

    相关文章

      网友评论

      本文标题:Javascript JSON

      本文链接:https://www.haomeiwen.com/subject/nueocftx.html