011_JSON数据格式简介与遍历
1. JSON是一种常用的数据传输的格式,语法格式如下 :
JSON语法规则 :
- 1. 数据存储在键值对中,也就是属性/属性值的形式
- 2. 多个数据之间逗号隔开
- 3. 大括号用来表示对象
- 4. 中括号用来表示数组
数据类型 :
- JSON数字 : {"age":20}
- JSON布尔 : {"flag":true}
- JSON null: {"name":null}
- JSON对象 : {"name":"lisi","age":20} ,
- 值不能是方法/函数,也不能是undefined或者NAN
JSON对象语法如下:
- JSON 对象使用在大括号({})中书写。
- 对象可以包含多个 key/value（键/值）对。
- key 必须是字符串，value 可以是合法的JSON数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）,值不能是方法/函数,不能是undefined/NAN。
- key 和 value 中使用冒号(:)分割。
- 每个 key/value 对使用逗号(,)分割。
JSON数组 :
{
"courses":[
{"name":"JavaSE","time":20},
{"name":"HTML","time":1},
{"name":"CSS","time":2},
{"name":"JavaScript","time":3}
]
}
2. JSON中元素的访问 :
var movie = {
"title":"扫毒2:天地对决",
"casts": [
{
"name":"古天乐",
"avatar":"http://xxxx.jpg",
"age":49
},
{
"name":"刘德华",
"avatar":"http://xxxx2.jpg",
"age":58
}
],
"pubDate":"2029-07-5",
"rate":9.5
}
//属性访问 JSON对象名.属性
console.log(movie);
console.log('title : ' + movie.title);
console.log('casts : ' + movie.casts);
console.log('name : ' + movie.casts[0].name) ;
console.log('name : ' + movie.casts[0][name]) ;// 访问不到name
for(var i in movie.casts){
console.log(i) ;
console.log(movie.casts[i].name) ;
console.log(movie.casts[i].avatar) ;
console.log(movie.casts[i].age) ;
}
// 结果如下 :
//{title: "扫毒2:天地对决", casts: Array(2), pubDate: "2019-07-5", rate: 9.5}
//title : 扫毒2:天地对决
//casts : [object Object],[object Object]
//name : 古天乐
//name : undefined
//0
//古天乐
//http://xxxx.jpg
//49
//1
//刘德华
//http://xxxx2.jpg
//58
3. JSON与字符串的互转
- JSON对象---->String : 借助 : JSON.stringify(jsonObj)
var jsonString = JSON.stringify(movie) ;
console.log(jsonString) ;
//{"title":"扫毒2:天地对决","casts":[{"name":"古天乐","avatar":"http://xxxx.jpg","age":49},{"name":"刘德华","avatar":"http://xxxx2.jpg","age":58}],"pubDate":"2019-07-5","rate":9.5}
console.log(typeof jsonString) ;
//string
- String ----> JSON对象 : 借助 : JSON.parse(jsonString)
var movieString = '{"name":"张三","age":20}' ;// JSON的字符串格式
console.log(movieString.name) ;
// undifined
var movieObject = JSON.parse(movieString) ;
// 转换为JSON对象
console.log(movieObject.name) ;
4. JS遍历与JQuery遍历
- JS遍历方式 : 借助 JavaScript中 for...in循环
// JS对象
var user = {
name:'张三',
age: 20
}
// json类型对象
var userJson = {
"name":"李四",
"age":30
}
//对象遍历 ,for...in中的 i变量,可以理解为数组的索引值,所以访问时要用[]括起来.
for(var i in user){
//xx.xx 这种形式 只能取原来具有的属性
//非常重要! xx.abc abc是变量,就必须通过 xx[abc] 形式取值
console.log('属性 : '+i+' ==> '+user[i]);
}
//json遍历
for(var a in userJson){
console.log('属性 : '+a+' ==> '+userJson[a]);
}
- JQuery普通对象遍历方式 : 借助JQuery中的each函数,注意先引入JQuery文件, 附JQuery下载地址 : http://www.jq22.com/jquery-info122 JQuery在线文档 : https://jquery.cuishifeng.cn/
json普通对象的遍历 :
$.each(data,function(index,value){
});
// each(obj,callBack);
// obj : 对象或者数组
// callback : 回调函数
// index : 索引值
// value : 对象
// json类型普通对象
var userJson = {
"name":"李四",
"age":30
}
$.each(userJson,function(index,value){
console.log('index : ' + index) ;
console.log('value : ' + value) ;
}) ;
//结果如下 :
// index : name
// value : 李四
// index : age
// value : 30
// 可以看出 : 在普通JSON对象的遍历中index是键,value是值.
- JSON数组对象JQuery遍历方式
var jsonArray = {
"courses":[
{"name":"JavaSE","time":20},
{"name":"HTML","time":1},
{"name":"CSS","time":2},
{"name":"JavaScript","time":3}
]
}
$.each(jsonArray,function(index,value){
// 第一层遍历获取数组名和数组值
console.log('index : ' + index) ;
console.log('value : ' + value) ;
// 第二层对数组值进行遍历 : 获取到索引值和索引值对应的元素,该元素是JSON对象,通过 对象名.属性 的形式访问内容
$.each(value,function(i,v){
console.log('i : ' + i) ;
console.log('v : ' + v) ;
console.log(v.name) ;
console.log(v.time) ;
}) ;
}) ;
遍历结果如下 :
index : courses value : [object Object],[object Object],[object Object],[object Object] i : 0 v : [object Object] name : JavaSE time : 20 i : 1 v : [object Object] name : HTML time : 1 i : 2 v : [object Object] name : CSS time : 2 i : 3 v : [object Object] name : JavaScript time : 3
