json解析 | Serena = 阳光果苏 = 自律给我自由

# JSON 是什么？

JSON：是一种数据格式，也是一个对象。跟 text 文本差不多。

JSON 是一个独立的文件，后缀名是.json

JSON 数据一般是后端开发人员提供给你，前端只需要复制解析即可。

JavaScript object notation ：JS 的对象表示法。

# 写 json 对象

回顾 object 的写法：

花括号包裹 {}
属性名 / 属性值成对出现（键值对）
属性之间用逗号，分隔，最后一对键值对可以不用逗号
排名不分先后（无序）
属性值可以是任意类型的数据（包括 6+1 种）

JSON 对象的写法：跟对象的相似度 99%：

花括号包裹 {}
属性名 / 属性值成对出现（键值对），属性名也要用引号包起来
属性之间用逗号，分隔，最后一对键值对必须不用逗号
排名不分先后（无序）
属性值可以是任意类型的数据（包括 6+1 种），不包括函数和 undefined
在 json 中不能写注释

在线验证 json 格式是否合法： http://www.bejson.com/

# 解析 json

跟对象或数组的解析方法一样，如果是对象要遍历，可能需用用 for in 循环。只是 json 嵌套可能较深，需要一级级遍历和提取。

# 模板字符串

加强版的引号，字符串。


使用``来代替"".
好处：
1. 代码换行也不会报错
2. 可以保留原有的html结构
写法：
var str=`<div>
            ${变量名}
        </div>`;
存在兼容性问题。

# for in 循环

循环对象的（也可以遍历数组）。数组一般用for循环，因为对象没有长度，不能用for循环。
语法：
for(属性名 in 对象){
    对象[属性名]；//属性值
}
比如：
var obj={
    name:"zhans",
    age:19
}

for(prop in obj){
    console.log(obj[prop]);//张三，19
}

# json 解析实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="web20.json"></script> -->
    <!-- <link rel="stylesheet" href="web20.json"> -->
</head>
<body>
    <table border="1" width="80%" align="center">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tbody id="tbd">
            <tr>
                <td>数据加载中，请稍后。。。</td>
                <!-- <td>18</td>
                <td>女</td>
                <td>音乐</td> -->
            </tr>
        </tbody>
        

        <!-- <tr>
            <td>李四</td>
            <td>19</td>
            <td>男</td>
            <td>唱歌</td>
        </tr> -->
    </table>

    <script>
    //假设jons已经拿到手了，到了当前页面了
    //数据
    var json={
        "web20":[{
            "name":"王宇铨",
            "age":18,
            "sex":"男",
            "hobby":["电影","敲代码"]
        },{
            "name":"刘莹",
            "age":19,
            "sex":"女",
            "hobby":["音乐","敲代码"]
        },{
            "name":"徐欢",
            "age":18,
            "sex":"女",
            "hobby":["码字","做饭"]
        },{
            "name":"徐欢2",
            "age":18,
            "sex":"女2",
            "hobby":["码2字","做2饭"]
        }]
    };

    // 通过遍历该对象循环生成结构即可
    var web20=json.web20;
    var tbd=document.getElementById("tbd");
    var html="";
    // 模拟明天的ajax
    setTimeout(function(){
        tbd.innerHTML=""
       for(var i=0;i<web20.length;i++){
           // console.log(web20[i]);
           tbd.innerHTML+="<tr><td>"+web20[i].name+"</td><td>"+web20[i].age+"</td><td>"+web20[i].sex+"</td><td>"+web20[i].hobby.join(",")+"</td></tr>";

           // var str="hello,world";
       } 
   },1500);
    

    </script>
</body>
</html>

# json 解析实例 - 使用模板字符串


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="web20.json"></script> -->
    <!-- <link rel="stylesheet" href="web20.json"> -->
</head>
<body>
    <table border="1" width="80%" align="center">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tbody id="tbd">
            
        </tbody>
        

        <!-- <tr>
            <td>李四</td>
            <td>19</td>
            <td>男</td>
            <td>唱歌</td>
        </tr> -->
    </table>

    <script>
    //假设jons已经拿到手了，到了当前页面了
    //数据
    var json={
        "web20":[{
            "name":"王宇铨",
            "age":18,
            "sex":"男",
            "hobby":["电影","敲代码"]
        },{
            "name":"刘莹",
            "age":19,
            "sex":"女",
            "hobby":["音乐","敲代码"]
        },{
            "name":"徐欢",
            "age":18,
            "sex":"女",
            "hobby":["码字","做饭"]
        },{
            "name":"徐欢2",
            "age":18,
            "sex":"女2",
            "hobby":["码2字","做2饭"]
        }]
    };

    // 通过遍历该对象循环生成结构即可
    var web20=json.web20;
    var tbd=document.getElementById("tbd");
    var html="";
    // 模拟明天的ajax
    // setTimeout(function(){
        // tbd.innerHTML=""
       for(var i=0;i<web20.length;i++){
           // console.log(web20[i]);
           tbd.innerHTML+=`<tr>
                            <td>${web20[i].name}</td>
                            <td>${web20[i].age}</td>
                            <td>${web20[i].sex}</td>
                            <td>${web20[i].hobby}
                        </tr>`;
           // var str="hello,world";
       } 
   // },1500);
    

    </script>
</body>
</html>

# json 解析实例 - for-in


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="web20.json"></script> -->
    <!-- <link rel="stylesheet" href="web20.json"> -->
</head>
<body>
    <table border="1" width="80%" align="center">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tbody id="tbd">
            
        </tbody>
        

        <!-- <tr>
            <td>李四</td>
            <td>19</td>
            <td>男</td>
            <td>唱歌</td>
        </tr> -->
    </table>

    <script>
    //假设jons已经拿到手了，到了当前页面了
    //数据
    var json={
        "web19":[{
            "name":"王宇铨",
            "age":18,
            "sex":"男",
            "hobby":["电影","敲代码"]
        },{
            "name":"刘莹",
            "age":19,
            "sex":"女",
            "hobby":["音乐","敲代码"]
        },{
            "name":"徐欢",
            "age":18,
            "sex":"女",
            "hobby":["码字","做饭"]
        }],
        "web20":[{
            "name":"王宇铨2",
            "age":18,
            "sex":"男",
            "hobby":["电影2","敲代码"]
        },{
            "name":"刘莹2",
            "age":19,
            "sex":"女",
            "hobby":["音乐2","敲代码"]
        }]
    };

    // 通过遍历该对象循环生成结构即可
    var web20=json.web20;
    var tbd=document.getElementById("tbd");
    var html="";//
    // 第一重循环，外循环，拿到的是第一层数据
    // 第二层循环，内循环，拿到的是具体的要解析的那个对象
    for(prop in json){
        console.log(prop);//web19,web20
        console.log(json[prop]);//[],[] 两个数组遍历出来
        for(pp in json[prop]){
            console.log(pp);//0,1,2
            console.log(json[prop][pp]);//每一位学生
            //性能问题
            //tbd.innerHTML+=,操作了多次DOM结构
            //操作DOM是有代价的
            //HTML是如何渲染的，DOM树更新后，需要重绘视图
            html+=`<tr>
                        <td>${json[prop][pp].name}</td>
                        <td>${json[prop][pp].age}</td>
                        <td>${json[prop][pp].sex}</td>
                        <td>${json[prop][pp].hobby}</td>
                    </tr>`;
        }

    }
    // 一次性插入到结构中,只操作了一次DOM
    tbd.innerHTML=html;

    </script>
</body>
</html>

json