JSON（二）：JS对JSON数据的处理、JSON与XML比较

目录

一、两种数据结构

二、字符串、json字符串、json对象

三、json和xml比较

四、JavaScript中使用JSON

五、一道JSON笔试题

参考资料：

一、两种数据结构

1、JSON对象

[code]{"name":"tom","age":18,"country":"USA"}

2、JSON数组

[code]["中国","日本","韩国"]

 

二、字符串、json字符串、json对象

（1）字符串：双引号或者单引号包括的字符。

[code]var str= 'this is string';

（2）json字符串：符合json格式要求的js字符串。

[code]var str = '[{"id":1,"name":"张三","age":20},{"id":2,"name":"李四","age":19}]';

（3）json对象：符合json格式要求的js对象。

[code]var str = {"id":1,"name":"张三","age":20}

 

三、json和xml比较

1、异同点

相同点：JSON和XML都是数据交换语言，完全独立于任何程序语言的文本格式。

不同点：XML文件格式复杂，比较占宽带，服务器端与客户端解析xml话费较多的资源和时间；JSON是轻量级的数据交换格式。

2、优缺点

XML的优点

• A.格式统一，符合标准；
• B.容易与其他系统进行远程交互，数据共享比较方便

XML的缺点

• A.XML文件庞大，文件格式复杂，传输占带宽；
• B.服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
• C.客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
• D.服务器端和客户端解析XML花费较多的资源和时间。

JSON的优点

• A.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
• B.易于解析，客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取；
• C.支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
• D.因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护

JSON的缺点

• A.没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
• B.JSON片段的创建和验证过程比一般的XML稍显复杂。

 个人工作业务中xml的使用相对较少，也只有在微信支付的时候使用过；以自身经验来看，JSON在通用性、普及率、创建过程上并没有什么问题。

3、应用场景

一般现在移动APP接口都采用JSON，因为json占宽带小。

在微信开发中,微信接口都是JSON格式的， 微信事件推送是XML。

 

四、JavaScript中使用JSON

1、json对象和json字符串之间相互转换

[code]//json字符串转换为json对象
var str = '{"name":"李明","age":"12"}';
var obj =  JSON.parse(str);
//json对象转换为json字符串
var obj ={"name":"李明","age":"12"}
var str = JSON.stringify(obj);

2、json对象的常用操作

[code]//json对象操作
var obj ={"name":"李明","age":"12","address":{"province":"山东","city":"青岛"},
"hobby":["reading","football","surfing"]}

//读
var name = obj.name;//李明
var province = obj.address.province;//山东
var hobby0 = obj.hobby[0];//reading

//写
obj.work="Engineer";

//修改
obj.name="李四";

//删除
delete obj.name;

//遍历
for (var c in obj) { //c表示json对象的key
console.log(c + ":", obj[c]);
}

 

五、一道JSON笔试题

题目：数据库表内容如下

id	name	age
1	张三	20
2	李四	21
3	王五	22

请用json进行描述，并处理显示在<table>中。

[code]//实现
var obj = [{"id":1,"name":"张三","age":20},{"id":2,"name":"李四","age":21},
{"id":3,"name":"王五","age":22}];
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for(var i =0 ;i<obj.length;i++){
var tr = document.createElement("tr");
for(var d in obj[i]){
var td = document.createElement("td");
td.style.border = "1px solid #ccc";
td.innerHTML = obj[i][d];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
document.body.appendChild(table);

 

参考资料：

[1] . 面试问题之：JSON是什么？

[2] . XML+JSON面试题都在这里.

[3] . 关于JSON的面试题.

[4] . JSON与XML的比较.

[5] . Json对象与Json字符串的转化、JSON字符串与Java对象的转换.

[6] . js json 字符串转json对象.

[7] . JSON菜鸟教程.