zoukankan      html  css  js  c++  java
  • JavaScript:JSON

     

     

    JSON是一种数据格式,它并不从属于JavaScript,很多语言都有JSON的解析器和序列化器。

    语法

    JSON可以表示三种类型:

    • 简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串、数值、布尔值和null。
    • 对象:表示一组无序的键值对。键值对中的值可以是简单值,也可以是复杂数据类型。
    • 数值:表示一组有序的值的列表,数组的值可以是任意类型。

    JSON不支持变量、函数或对象实例,是一种表示结构化数据的格式。

    简单值

    JSON数据形式:

    5    // 数值
    "Hello JavaScript"    // 字符串
    null

    对象

    与JavaScript不同,JSON中的对象要求给属性加上引号

    {
        "name": "萧萧弈寒";
        "age": 100
    }
    
    // 属性的值也可以是复杂类型
    {
        "school": {
            "name": "hafo", 
            "location": "Harbin"
        }
    }

    数组

    JSON表示数组:

    [100, "萧萧弈寒", true]

    JSON数组没有变量和分号。

    把数组和对象结合,可以构造复杂的数据集合:

    [
        {
            "title":"Java从入门到放弃",
            "authors":[
                "张三"
            ],
            edition: 2
        },
        {
            "title":"MySQL从删库到跑路",
            "authors":[
                "李四"
            ],
            edition: 3
        },
        {
            "title":"Dreamweaver从安装到卸载",
            "authors":[
                "王五"
            ],
            edition: 4
        }
    ]

    解析与序列化

    JSON对象

    JSON对象有两个方法:

    • stringfy():把JavaScript对象序列化为JSON字符串
    • parse():。把JSON字符串解析为原生JavaScript值

    示例:

    var book = {
        "title":"Java从入门到放弃",
        "authors":[
            "张三"
        ],
        edition: 2
    };
    var jsonText = JSON.stringify(book);
    alert(jsonText);    // {"title":"Java从入门到放弃","authors":["张三"],"edition":2}

    上面的例子将一个JavaScript对象序列化为一个JSON字符串。默认情况下,JSON.stringify()不包含任何字符或缩进。

    将JSON字符串直接传递个JSON.parse()可以得到相应的JavaScript值。

    var newBook = JSON.parse(jsonText);    

    book与newBook具有相同的属性,但是彼此是相互独立的。

    序列化选项

    JSON.stringify()还可以接收两个参数:

    • 第一个参数:过滤器,一个数组或一个函数。
    • 第二个参数:一个选项,表示是否在JSON字符串中保留缩进

    过滤结果

    如果参数是数组,JSON.stringify()的结果只包含数组中列出的属性。

    var book = {
        "title":"Java从入门到放弃",
        "authors":[
            "张三"
        ],
        edition: 2
    };
    var jsonText = JSON.stringify(book, ["title", "authors"]);
    console.log(jsonText);  // {"title":"Java从入门到放弃","authors":["张三"]}

    如果参数是函数,传入的函数接收两个参数,属性名和属性值,根据属性名可以知道如何处理属性。属性名是字符串,属性值并非键值对的值,键名可以是空字符串。

    返回的值是相应键的值,如果函数返回undefined,那么该属性就会被忽略。

    var book = {
        "title":"Java programming",
        "authors":[
            "张三",
            "李四"
        ],
        edition: 2
    };
    var jsonText = JSON.stringify(book, function (key, value) {
        switch (key) {
            case "authors":
                return value.join("-");        // 用“-”分割数组
            case "edition":
                return undefined;
            default :
                return value;
        }
    });
    console.log(jsonText);    // {"title":"Java programming","authors":"张三-李四"}

    字符串缩进

    JSON.stringify()的第三个参数用于控制结果中的缩进和空白符。如果是数值,表示每格缩进的空格数。

    var book = {
        "title":"Java programming",
        "authors":[
            "萧萧弈寒",
        ],
        edition: 2
    };
    var jsonText = JSON.stringify(book, null, 4);
    console.log(jsonText);

    如果是字符串,这个字符串将用作JSON字符串的缩进符

    var book = {
        "title":"Java programming",
        "authors":[
            "萧萧弈寒",
        ],
        edition: 2
    };
    var jsonText = JSON.stringify(book, null, "__");
    console.log(jsonText);

    【显示结果】:

    {
    __"title": "Java programming",
    __"authors": [
    ____"萧萧弈寒"
    __],
    __"edition": 2
    }

    缩进字符串最多只能包含10个字符。

    toJSON()方法

    JSON.stringify()并不能满足所有对象进行序列化的需求。可以给对象定义toJSON()方法,返回其自身的JSON数据格式。

    示例:

    var book = {
        "title":"Java programming",
        "authors":[
            "萧萧弈寒",
        ],
        edition: 2,
        toJSON: function () {
            return "==="+this.title+"===";
        }
    };
    var jsonText = JSON.stringify(book);
    console.log(jsonText);    // "===Java programming==="

    解析选项

    JSON.parse()方法也可以接收另一个参数,该参数是一个函数,将在每个键值对上调用。如果返回undefined,表示从结果中删除相应的键,如果返回其他值,则将该值插入到结果中。

    var book = {
        "title":"Java programming",
        "authors":[
            "萧萧弈寒",
        ],
        edition: 2,
        year: 2017,
        releaseDate: new Date(2017, 11, 1)
    };
    var jsonText = JSON.stringify(book);
    
    var newBook = JSON.parse(jsonText, function (key, value) {
        if (key == "releaseDate") {
            return new Date(value);
        } else {
            return value;
        }
    });
    console.log(newBook.releaseDate.getFullYear());    // 2017

    上面新增了releaseDate属性,该属性保存着一个Date对象。经过序列化后,变成了一个有效的JSON字符串,然后又在newBook中还原成一个Date对象。

    作者:萧萧弈寒
    本文版权归作者萧萧弈寒和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
  • 相关阅读:
    SSR 第二篇,搭建Vue SSR程序
    SSR 第一篇,搭建简单的SSR程序
    数组的所有方法整理学习
    CustomEvent 使用
    VUE CSS module
    eslint Expected linebreaks to be 'LF' but found 'CRLF'
    利用Object.freeze() 提升性能
    vue 项目开启gzip 压缩和性能优化
    [转]Ext Grid控件的配置与方法
    ExtJS renderer(转)
  • 原文地址:https://www.cnblogs.com/hellohell/p/5726605.html
Copyright © 2011-2022 走看看