菜鸟教程个人学习心得05_JavaScript的JSON格式

最新推荐文章于 2022-08-19 20:52:53 发布

旧梦半岛

最新推荐文章于 2022-08-19 20:52:53 发布

阅读量182

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_48459574/article/details/108753164

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript的JSON格式

什么是JSON：
JSON 是用于存储和传输数据的格式，JSON 通常用于服务端向网页传递数据，个人理解为模拟数据，实训中运用过JSON格式进行数据传输。
示例代码：运用JSON语义定义对象的四条网站信息的数组，并且遍历输出四条信息数组，以及修改JSON数据并输出：

    <script>
        // 以对象作为JSON数组元素
        const book = [
            {
                "bookname": "三国演义",
                "author": "罗贯中"
            },
            {
                "bookname": "水浒传",
                "author": "施耐庵"
            }, {
                "bookname": "西游记",
                "author": "吴承恩"
            }, {
                "bookname": "红楼梦",
                "author": "曹雪芹"
            }

        ]
        //遍历book
        document.writeln("修改前:<br>")
        for (i in book) {
            document.writeln("书名：" + book[i].bookname + " " + "作者：" + book[i].author + "<br>")
        }
        // 修改内容：
        document.writeln("修改后:<br>")
        book[0].bookname = "卧龙凤雏带不动桃园三坑"
        for (i in book) {
            document.writeln("书名：" + book[i].bookname + " " + "作者：" + book[i].author + "<br>")
        }
    </script>

运行结果：
在这里插入图片描述
嵌套JSON对象：
示例代码：创建嵌套JSON对象，并且通过两种不同方式方问嵌套的JSON对象：一种方式为.，一种方式为[]，以及修改嵌套JSON对象的数据：

    <p id="p1"></p>
    <script>
        // 创建嵌套JSON对象
        const book = [
            {
                "bookname": "三国演义",
                "author": {
                    "name": "罗贯中",
                    "sex": "男",
                }
            },
            {
                "bookname": "水浒传",
                "author": {
                    "name": "施耐庵",
                    "sex": "男",
                }
            }, {
                "bookname": "西游记",
                "author": {
                    "name": "吴承恩",
                    "sex": "男"
                }
            }, {
                "bookname": "红楼梦",
                "author": {
                    "name": "曹雪芹",
                    "sex": "男"
                }
            }
        ]
        // 便利JSON对象的数据
        for (i in book) {
            document.getElementById("p1").innerHTML += "书名: " + book[i].bookname + "  作者:" + book[i].author["name"] + "  性别:" + book[i].author.sex + "<br>";
        }
        document.writeln("修改前数据：" + book[2].author["name"] + "<br>");
        // 修改JSON对象的数据
        book[2].author["name"] = "章金莱";
        document.writeln("修改后数据：" + book[2].author["name"]);
    </script>

运行截图：
在这里插入图片描述
删除JSON对象的嵌套属性：
示例代码：

    删除属性前：<p id="p1"></p>
    删除属性后：<p id="p2"></p>
    <script>
        // 创建嵌套JSON对象
        const book = [
            {
                "bookname": "三国演义",
                "author": {
                    "name": "罗贯中",
                    "sex": "男",
                }
            },
            {
                "bookname": "水浒传",
                "author": {
                    "name": "施耐庵",
                    "sex": "男",
                }
            }, {
                "bookname": "西游记",
                "author": {
                    "name": "吴承恩",
                    "sex": "男"
                }
            }, {
                "bookname": "红楼梦",
                "author": {
                    "name": "曹雪芹",
                    "sex": "男"
                }
            }
        ]
        // 便利JSON对象的数据
        for (i in book) {
            document.getElementById("p1").innerHTML += "书名: " + book[i].bookname + "  作者:" + book[i].author["name"] + "  性别:" + book[i].author.sex + "<br>";
        }
        // 删除对象属性
        for (i in book) {
            delete book[i].author["sex"]
            document.getElementById("p2").innerHTML += "书名: " + book[i].bookname + "  作者:" + book[i].author["name"] + "  性别:" + book[i].author.sex + "<br>";
        }
    </script>

运行结果：
在这里插入图片描述
JSON对象的数据不仅可以通过for( in )来便利，也可以通过for循环来遍历：

        // 使用for循环遍历数组
        for (i = 0; i < book.length; i++) {
            document.getElementById("p3").innerHTML += "书名: " + book[i].bookname + "  作者:" + book[i].author["name"] + "  性别:" + book[i].author.sex + "<br>";
        }

运行结果：
在这里插入图片描述

JSON的两个重要方法：

JSON.parse()：可以将数据转换为 JavaScript 对象
语法：JSON.parse(text[, reviver])
实例代码：

        // JSON的parse()方法的使用：
        //创建一条student的JSON格式的数据
        var student = '{"name":"张三","sex" :"男","age" :"17"}'
        //将JSON格式的数据转换成JavaScript 对象
        var stuObj = JSON.parse(student)
        // 以对象名.属性输出JSON的数据
        document.getElementById("p2").innerHTML = stuObj.name + " " + stuObj.sex + " " + stuObj.age
        // 以对象名["属性名"]输出JSON的数据
        document.writeln(stuObj["name"] + " " + stuObj["sex"] + " " + stuObj["age"])

运行结果：
在这里插入图片描述
JSON不能存储Date对象，如果需要存储Date对象，需要将其转换成字符串，再将字符串转换成Date对象
示例代码：

    <p id="p3"></p>
    <script>
        // 创建一条JSON数据
        var person = '{"name" : "李四","birthday" :"2020-01-01" }'
        // 将JSON数据转换成JavaScript 对象
        var perObj = JSON.parse(person)
        perObj.birthday = new Date(perObj.birthday)
        document.getElementById("p3").innerHTML = perObj.birthday;
    </script>

运行结果：
在这里插入图片描述
parse()的第二个参数reviver：
每一个对象成员调用此函数，当对象的键为birthday时，将其转换成日期类型：
示例代码：

    <p id="p4"></p>
    <script>
        // 创建一条JSON数据
        var person1 = '{"name" : "李四","birthday" :"2020-01-01" }'
        // 将JSON数据转换成JavaScript 对象,日期转换直接利用函数判断转换
        var perObj1 = JSON.parse(person1, function (key, value) {
            if (key == "birthday") {
                return new Date(value)
            } else {
                return value;
            }
        })
        document.getElementById("p4").innerHTML = perObj1.birthday;
    </script>

运行结果：
在这里插入图片描述
JSON不能解析函数，可以先将函数作为字符串存储，再将字符串转换成函数
示例代码：

    <p id="p5"></p>
    <script>
        var dogInfo = '{ "name":"哈士奇", "introduce" : "雪橇三傻的大哥大！", "praise":"function () {return 666;}"}';
        var dogObj = JSON.parse(dogInfo);
        dogObj.praise = eval("(" + dogObj.praise + ")");
        document.getElementById("p5").innerHTML = dogObj.name + "是" + dogObj.introduce + "，拆家本领" + dogObj.praise() + "!";
    </script>

运行结果：
在这里插入图片描述
2. JSON.stringify()：将 JavaScript 对象转换为字符串
将 JavaScript 对象转换为JSON字符串:
示例代码：

    <p id="p6"></p>
    <script>
        var car = {
            "name" :"宝马",
            "color" : "白色",
            "price" : "100000"
        }
        // 将JavaScript对象装换成JSON字符串
        var jsonStr = JSON.stringify(car)
        document.getElementById("p6").innerHTML = jsonStr
    </script>

运行结果：
在这里插入图片描述
将 JavaScript 数组转换为JSON字符串:
示例代码：

    <p id="p7"></p>
    <script>
        var arrays = ["张三","李四","王五"]
        var arraysStr = JSON.stringify(arrays)
        document.getElementById("p7").innerHTML = arraysStr
    </script>

运行结果：
在这里插入图片描述
JSON不能存储Date对象，JSON.stringify() 会将所有日期转换为字符串
示例代码：

    <p id="p8"></p>
    <script>
        var info = {
            "name" : "日期",
            "value" : new Date()
        }
        var infoObj = JSON.stringify(info);
        document.getElementById("p8").innerHTML = infoObj
    </script>

运行截图：
在这里插入图片描述
JSON不能解析函数，利用JSON.stringify()会自动删除函数
示例代码：

    <p id="p9"></p>
    <script>
        var cat = {
            "name": "喵了个咪",
            "price": function () { return 2333; }
        }
        // stringify()会自动删除函数
        var catObj = JSON.stringify(cat)
        document.getElementById("p9").innerHTML = catObj
    </script>

运行截图：
在这里插入图片描述
如果想保留函数，可以先将函数转换成字符串，以此来保留函数：
示例代码：

    <p id="p10"></p>
    <script>
        var mouse = {
            "name": "吱吱唔",
            "price": function () { return 0.1 }
        }
        // 将对象转换成字符串，函数就不会被删除
        mouse.price = mouse.price.toString()
        var mouseStr = JSON.stringify(mouse)
        document.getElementById("p10").innerHTML = mouseStr
    </script>

运行结果：
在这里插入图片描述
eval()可以将JSON文本转换为JavaScript对象：
语法格式：var obj = eval (" (" + txt + ") ")
示例代码：

    <p id="p1"></p>
    <script>
        // 创建JSON格式的JavaScript字符串
        var txt = '{"sites" :[' +
            '{"name" : "三国演义","author" : "罗贯中"}, ' +
            '{"name" : "红楼梦","author" : "曹雪芹"}, ' +
            '{"name" : "水浒传","author" : "施耐庵"} ]}';
        // 将JSON文本转换成JavaScript对象
        var obj = eval("(" + txt + ")");
        for (i in obj.sites) {
            document.getElementById("p1").innerHTML += obj.sites[i].name + " " + obj.sites[i].author + "<br>";
        }
    </script>