对象的解析_对象解析-优快云博客

对象的解析过程像剥洋葱一样一层层筛选

对象
- 参数中使用对象更加的灵活
- 组件开发中更具有模块化

var json = {
    name:"xq",
    age:18,
    address:"湖南长沙",
    tel:1323124124,
    arr:[1,2,3,4,5],
    comment:[
        {usename:"zhangsan1",password:123},
        {usename:"zhangsan2",password:123},
        {usename:"zhangsan3",password:123},
        {usename:"zhangsan4",password:123}
    ]
};

for(var key in json){
    //判断一下是不是数组
    var data = json[key];
    if(Array.isArray(data)){
        var html = "";
        for(var i=0;i<data.length;i++){
            var fparma = data[i];
            if(typeof fparma == "object"){
                html += data[i].usename +"---"+data[i].password+"<br />";
            }
        }
        document.getElementById("box").innerHTML = html;
    }
    //console.log(key +"===="+json[key]);
}

获取到数据的话

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * { margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li { list-style: none;}
            body { font-family: "Microsoft yahei";}
        </style>
    </head>
<body>

<script type="text/javascript">
    var json = {
        name:"goudan",
        comment:[
            {user:"大狗",phone:"1324314",address:"大地",alert:123},
            {user:"二狗",phone:"1324314",address:"大地",alert:123},
            {user:"三狗",phone:"1324314",address:"大地",alert:123},
            {user:"四狗",phone:"1324314",address:"大地",alert:123}
        ],
        cast:[
            {
                alt: "https://movie.douban.com/celebrity/1025154/",
                avatars: {
                    small: "http://img7.doubanio.com/img/celebrity/small/2431.jpg",
                    large: "http://img7.doubanio.com/img/celebrity/large/2431.jpg",
                    medium: "http://img7.doubanio.com/img/celebrity/medium/2431.jpg"
                },
                name: "米拉·乔沃维奇",
                id: "1025154",
                genres:[
                    "动作",
                    "科幻",
                    "恐怖"
                ]
            },
            {
                alt: "https://movie.douban.com/celebrity/1009367/",
                avatars: {
                    small: "http://img7.doubanio.com/img/celebrity/small/1416757467.73.jpg",
                    large: "http://img7.doubanio.com/img/celebrity/large/1416757467.73.jpg",
                    medium: "http://img7.doubanio.com/img/celebrity/medium/1416757467.73.jpg"
                },
                name: "伊恩·格雷",
                id: "1009367"
            },
            {
                alt: "https://movie.douban.com/celebrity/1018978/",
                avatars: {
                    small: "http://img3.doubanio.com/img/celebrity/small/187.jpg",
                    large: "http://img3.doubanio.com/img/celebrity/large/187.jpg",
                    medium: "http://img3.doubanio.com/img/celebrity/medium/187.jpg"
                },
                name: "艾丽·拉特",
                id: "1018978"
            },
            {
                alt: "https://movie.douban.com/celebrity/1344655/",
                avatars: {
                    small: "http://img7.doubanio.com/img/celebrity/small/1468578204.83.jpg",
                    large: "http://img7.doubanio.com/img/celebrity/large/1468578204.83.jpg",
                    medium: "http://img7.doubanio.com/img/celebrity/medium/1468578204.83.jpg"
                },
                name: "鲁比·罗丝",
                id: "1344655"
            }
        ]
    };
    var genres = json.cast[0].genres.join();
    var castName = [];
    var cast = json.cast;
    for(var i=0;i<cast.length;i++){
        castName.push(cast[i].name);
    };
    castName = castName.join("/");
    console.log(castName);
</script>
</body>
</html>