美文网首页
Web基础复习——JSON

Web基础复习——JSON

作者: 哈尼橘橘 | 来源:发表于2019-04-09 21:34 被阅读0次

    什么是JSON

    JavaScript Object Notation,JS对象表示方法。
    是轻量级的文本数据交换格式。
    与XML类似。

    XML和JSON的区别

    相同:

    • 都是纯文本
    • 具有“自我描述性”,人类可读
    • 具有层级结构
    • 可通过JS进行解析
    • 数据可使用AJAX进行传输

    不同:

    对JSON来说:

    • 没有结束标签
    • 更短
    • 读写速度更快
    • 使用数组
    • 无保留字
    • 可使用内建的 JavaScript eval() 方法进行解析

    语法

    基本语法规则在前面整理 JavaScript 的文章中有提到,不再重复。

    创建对象

    var animal = [
        {"name":"Cat","Color":"Orange"},
        {"name":"Dog","Color":"Black"},
        {"name":"Rabbit","Color":"White"}
    ]
    

    访问对象值
    var a = animal[0].name;
    var b = animal[1]["name"];
    两种方式都可以。

    循环输出对象属性

    for (i in animal[0]) {
            document.getElementById('property').innerHTML += i + "<br>";
    }
    

    循环输出对象属性值

    for (j in animal[0]) {
            document.getElementById('property').innerHTML += animal[0][j] + "<br>";
    }
    

    循环数组啥的balabala都类似,看一眼就融会贯通了,不多写了。主要是懒

    以上示例代码运行结果:

    对象数组的创建、修改与访问

    示例代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>对象数组</title>
    </head>
    <body>
        <h1>对象数组的创建、修改与访问</h1>
        <p>第一只猫叫<span id = "name1"></span></p>
        <p>第一只猫改名之后叫<span id = "name2"></span></p>
    
        <script type="text/javascript">
            //创建对象数组
            var cat = [
            {"name":"团团","breed":"英短"},
            {"name":"Nuts","breed":"曼赤肯"},
            {"name":"汤圆","breed":"美短"},
            ];
    
            //访问对象数组
            document.getElementById('name1').innerHTML = cat[0].name;
    
            //修改
            cat[0].name = "包子";
    
            document.getElementById("name2").innerHTML = cat[0].name;
        </script>
    </body>
    </html>
    

    运行结果:

    数据与JS对象相互转换

    数据转JS对象:JSON.parse()
    JS对象转数据:JSON.stringify()
    具体怎么用,在整理JavaScript的文章中有详细示例,这里就不复制粘贴凑字数了。

    JSON的整理有部分内容JS里面有提到,就简单略过了,补充了一些之前没有顾到的地方。

    相关文章

      网友评论

          本文标题:Web基础复习——JSON

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