json基础

水深无声 2021-11-04 17:32 245阅读 0赞

##### json基础 #####

###### 1. json所属类型 ######

###### ① 对象类型 ######

###### ② 数组类型 ######

###### 2. json标准格式 ######

//标准格式
    //格式1
    	var person = { 
    		"name":"zhang",
    		"age":18,
    		"job":"student"
    	}
    //格式2
    	var person = [
    		{ 
    			"name":"zhang",
    			"age":18,
    			"job":"student"
    		},
    		{ 
    			"name":"zhang",
    			"age":18,
    			"job":"student"
    		}
    ]

//非标准格式
    //格式3
    	var person = { 
    		name:"zhang",
    		age:18,
    		job:"student"
    	}

###### 3. 获取json数据 ######

//对格式1的获取
    	person.name;//zhang
    	person.age;//18
    	person.job;//student
    //对格式2的获取
    	person[1].name;//zhang
    	person[1]["name"];//zhang
    	person[1]["age"];//18

###### 4. json的数据类型转换 ######

###### ① json对象转字符串：`Json.stringify(json对象)` ######

###### ② 字符串转json对象：a. `Json.parse(字符串)` b. `eval(str)` ######

###### a和 b的区别：b 对str的格式有要求，其要求str必须和Json的标准格式一致，否则无法转换 ######

var stus = { 
            name: "张三",
            age: 18,
            job: "学生"
        }
         console.log(eval(JSON.stringify(stus)));//报错：token: (格式有误)
         console.log(JSON.parse(JSON.stringify(stus)));//正确！

![在这里插入图片描述][20190807164510224.PNG]![在这里插入图片描述][20190807164429588.PNG]

###### 5. `for in`遍历数组 ######

//for(var 变量名 in 数组/json对象 )
    //遍历数组：index为索引值
    var city=[
            { 
                "id":1001,
                "name":"北京市",
                "child":[
                    { 
                        "id":"10011",
                        "name":"海淀区",
                        "child":[
                            { 
                                "name":"海淀区街道01"
                            },
                            { 
                                "name":"海淀区街道02"
                            }
                        ]
                    },
                    { 
                        "id":"10012",
                        "name":"朝阳区",
                        "child":[
                            { 
                                "name":"朝阳区街道01"
                            },
                            { 
                                "name":"朝阳区街道02"
                            }
                        ]
                    }
                ]
            },
            { 
                "id":1002,
                "name":"陕西省",
                "child":[
                    { 
                        "id":"10021",
                        "name":"西安市",
                        "child":[
                            { 
                                "name":"高新区",
                                "child":[
                                    { 
                                        "name":"高新区街道01"
                                    },
                                    { 
                                        "name":"高新区街道02"
                                    }
                                ]
                            },
                            { 
                                "name":"长安区"
                            }
                        ]
                    },
                    { 
                        "id":"10022",
                        "name":"宝鸡市",
                        "child":[
                            { 
                                "name":"成仓区"
                            },
                            { 
                                "name":"金台区"
                            }
                        ]
                    }
                ]
            }
        ]
       for(var index in city){ 
            for(var key in city[index].child){ 
                for(var list in city[index].child[key].child){ 
                    console.log(city[index].child[key].child[list]);
                }
            }
        }

//遍历json对象，index为name,age,job。而循环次数就是key的个数（下例中为3）
    var stus = { 
            name: "张三",
            age: 18,
            job: "学生"
        }
        for(var index in stus){ 
       			console.log( stus[index]);//输出张三、18、学生
        }

[20190807164510224.PNG]: https://img-blog.csdnimg.cn/20190807164510224.PNG
[20190807164429588.PNG]: /images/20211104/bb9c0a8a250c40e99ea924bacad4b5f5.png