《前端进阶》json格式数据
- 学习json的目的
- 学习json完成后能够熟练掌握并使用json格式的数据,并能使用json格式的数据进行通讯交互。
- 理解json数据格式和serialize序列化、XML以及数组的区别
- Json的起源
- JSON是Douglas Crockford在2001年开始推广使用的数据格式,在2005年-2006年正式成为主流的数据格式,雅虎和谷歌就在那时候开始广泛地使用JSON格式。
- 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言,简称GML,它主要是为脚本语言定义的一组宏。
- 1986年,基于GML开发的另一种标记语言Standard Generalized Markup Language(简称SGML)诞生,并成为了ISO标准,接着在1998年,SGML又被重新定义为XML
不管从事什么开发,都离不开三种数据类型,这里解释的三种数据类型不是那一种语言的数据类型,而是统称,涵盖大部分的编程语言
- 第一中类型是标量(scalar),也就是一个单独的字符串(string)或者数字(numbers),例如“tom” 这是一个单独的词。
- 第二种类型是序列(sequence),也就是若干个相关啊的数据按照一定顺序并列在一起,又叫做数字(Array)或者列表(list),例如:“tom”,”jack”
- 第三种类型是映射(mapping),也就是一个键/值(Key/Vlaue)即数据有一种名称,还有一个与之对应的值,这又称作散列(hash)或者字典(dictionary),例如”姓名”:“tom”。
- 什么是json
Json就是(JavaScript Object Notation),它是一种轻量级的数据交互格式。
JSON是JS的一种简单数据格式,JSON是JavaScript原生格式,它是一种严格的js对象的格式,JSON的属性名必须有双引号,如果值是字符串,也必须是双引号。
它是一种严格的JS对象的格式,JSON属性名称必须有双引号,如果值是字符串,也必须是双引号;
<script>
var obj ={};//这只是JS对象
var obj1={width:100,height:200}//JS对象
var obj2={'width':100,'height':100}//JS对象
var obj3={"width":100,"height":100,"name":"rose"}//JSON格式的JS对象
var obj4='{"width":100,"height":200,"name":"rose"}';/*我们可以把这个称做:JSON格式的字符串 */
var array=[
{"width":100,"height":200,"name":"rose"},
{"width":100,"height":200,"name":"rose"},
{"width":100,"height":200,"name":"rose"},
] /*这个叫JSON格式的数组,是JSON的稍复杂一点的形式 */
var arrayStr='['+
'{"width":100,"height":200,"name":"rose"},'+
'{"width":100,"height":200,"name":"rose"},'+
'{"width":100,"height":200,"name":"rose"},'+
']' ;/* 这个叫稍复杂一点的JSON格式的字符串 */
</script>
|
区别
|
JSON
|
Javascript
|
|
含义
|
仅仅是一种数据格式
|
表示类的实例
|
|
传输
|
可以跨平台数据传输,速度快
|
不能传输
|
|
表现
|
1.键值对方式,键必须加双引号 2.值不能是方法函数,不能是undefined/NaN
|
1.键值对方式,键不加引号 2.值可以是函数、对象、字符串、数字、boolean 等
|
|
相互转换
|
Json转换Js对象 1.JSON.parse(JsonStr);(不兼容IE7) 2.eval("("+jsonStr+")");(兼容所有浏览器,但不安全,会执行json里面的表达式?)
|
js对象转换Json JSON.stringify(jsObj);
|
举个例子:
号码归属地的查询
{
"success": "1",
"result": {
"status": "ALREADY_ATT", /*状态*/
"par": "110101", /*身份证前缀*/
"idcard": "110101199001011114", /*查询的身份证号码*/
"born": "1990年01月01日", /*出生年月日*/
"sex": "男", /*性别*/
"att": "北京市 东城区 ", /*归属地*/
"postno": "100000", /*邮编*/
"areano": "010", /*区号*/
"style_simcall": "中国,北京", /*地区1*/
"style_citynm": "中华人民共和国,北京市" /*地区2*/
}
}
- Json的基本语法
- Json的四种基本规则
- 并列的数据之间逗号(“,”)分隔
- 映射(键值对)用冒号(“:”)表示
- 并列数据的集合(数组)用方括号(“[]”)表示
- 映射的集合(对象)用大括号(“{}”)表示。
- 举个例子
“北京市的面积为16800平方公里,常住人口1600万人”。“上海市的面积为6400平方公里,常住人口1800万”
转化为json格式数据之后:
[
{“城市”:”北京”,”面积”:“16800”,“人口“:”1600”},
{“城市”:”上海”,”面积”:“6400”,“人口“:”1800”}
]
[
{"name":"张三","sex":"男","age":"18"},
{"name":"李四","sex":"男","age":"18"},
{"name":"王五","sex":"男","age":"18"}
]
- Json的优缺点
优点
- 数据格式比较简单,易于读写,格式都是压缩的,占用带宽小。
- 支持多种语言,包括ActionScript,C,C#,ColdFusion,java,
、JavaScript,Prel,php,Python,Puby等服务器端语言,便于服务器端的解析。
缺点:
- 要求的字符集必须是Unicode,受约束性强
- 语法过于严谨,必须遵守json语法四个原则
- Json与其他格式的区别
XML
XML是标准通用标记语言(SGML)的子集,非常合适Web传输
XML提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据
文件比较大,数据节点比较多
<apps>
<app>
<id>1</id>
<name>Google Maps</name>
<virsion>1.0</virsion>
</app>
<app>
<id>2</id>
<name>Chrome</name>
<version>2.1</version>
</app>
<app>
<id>3</id>
<name>Google Play</name>
<version>2.3</version>
</app>
</apps>
- js获取json的值
- 你可以使用点号(.)来访问对象的值:
var myobj={ "name":"李四",
"age":"18",
"sex":"男"
};
console.log( myobj.name);
- 你也可以使用中括号([])来访问对象的值
var myobj={ "name":"李四",
"age":"18",
"sex":"男"
};
console.log( myobj["name"]);//记得带引号
- 你可以使用 for-in 来循环对象的属性:
var myobj={ "name":"李四",
"age":"18",
"sex":"男"
};
for(x in myobj){
console.log(x);
console.log(myobj[x]);
}
修改json中的数据
- 你可以使用点号(.)来修改 JSON 对象的值:
var myobj={ "name":"李四",
"age":"18",
"sex":"男"
};
myobj.name='张三';
console.log(myobj);
- 你可以使用中括号([])来修改 JSON 对象的值:
var myobj={ "name":"李四",
"age":"18",
"sex":"男"
};
myobj["name"]="孙八";
console.log(myobj);
删除属性
- 我们可以使用 delete 关键字来删除 JSON 对象的属性
delete myobj.name;
console.log(myobj);
- 你可以使用中括号([])来删除 JSON 对象的属性
delete myobj["name"];
console.log(myobj);
json与对象互相转换
①、json->对象
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法
JSON.parse(text[, reviver])
参数说明:
text:必需, 一个有效的 JSON 字符串。
reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
例如:
另外一种:
JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象
eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中
var json2='{"name":"张三","age":"18","sex":"男"}';
str=eval('('+json2+')');
console.log(str);
①、对象->json
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
语法
JSON.stringify(value[, replacer[, space]])
参数说明:
value:
必需, 要转换的 JavaScript 值(通常为对象或数组)。
replacer:
可选。用于转换结果的函数或数组。

浙公网安备 33010602011771号