🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 3.5.1 json简介 ​ JSON全称"JavaScript Object Notation",意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式。 XML也是一种数据交换格式,为什么没有选择XML呢?因为XML虽然可以作为跨平台的数据交换格式,但是在JS中处理XML非常不方便,同时XML标记比数据多,增加了交换产生的流量, 而json没有附加任何标记,在JS中可作为对象处理,所以更倾向于JSON来交换数据。 <br/> ## 3.5.2 json的两种结构 ​ json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构。 1. 对象:对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。 ``` var jsonObj = { "name": "tom", "age": 12 } ``` 2. 数组:数组在js中是中括号“[]”括起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。 ``` var jsonArr = [ { "id": 1, "name": "john" }, {"age":13,"address":"str1"} ] ``` 经过对象、数组 这2种结构就可以组合成复杂的数据结构了。 <br/> ## 3.5.3 json字符串 ~~~ var Str = "this is a String"; //字符串 var jsonObj = {Name:"dick",age:"20",ID:"160512"}; //json对象 var jsonStr = "{Name:"dick",age:"20",ID:"160512"}"; //json字符串 //json字符串指的是符合json格式要求的js字符串 ~~~ <br/> ## 3.5.4 在JS中如何使用JSON ​ JSON是JS的一个子集,所以可以在JS中轻松地读,写JSON。读和写JSON都有两种方法,分别是利用”.”操作符和“\[key\]”的方式。 我们首先定义一个JSON对象,代码如下。 ~~~ var obj = { 1: "value1", "2": "value2", count: 3, person: [ //数组结构JSON对象,可以嵌套使用 { id: 1, name: "张三" }, { id: 2, name: "李四" } ], object: { //对象结构JSON对象 id: 1, msg: "对象里的对象" } }; ~~~ 1. 从JSON中读数据 ~~~ function ReadJSON() { alert(obj.1); //会报语法错误,可以用alert(obj["1"]);说明数字最好不要做关键字 alert(obj.2); //同上 alert(obj.person[0].name); //或者alert(obj.person[0]["name"]) alert(obj.object.msg); //或者alert(obj.object["msg"]) } ~~~ 2. 向JSON中写数据 比如要往JSON中增加一条数据,代码如下: ~~~ function Add() { //往JSON对象中增加了一条记录 obj.sex= "男" //或者obj["sex"]="男" } ~~~ 增加数据后的json对象如图 ![](https://box.kancloud.cn/c8ffe3be26768e21eeab68300a8e2e76_559x146.png) 3. 修改JSON中的数据 我们现在要修改JSON中count的值,代码如下: ~~~ function Update() { obj.count = 10; //或obj["count"]=10 } ~~~ 4. 删除JSON中的数据 我们现在实现从JSON中删除count这条数据,代码如下: ~~~ function Delete() { delete obj.count; } ~~~ 5. 遍历JSON对象 可以使用for…in…循环来遍历JSON对象中的数据,比如我们要遍历输出obj对象的值,代码如下: ``` function Traversal() { for (var c in obj) { console.log(c + ":", obj[c]); } } ``` 程序输出结果为: ![](https://img.kancloud.cn/8a/08/8a08a86f72ddc1e7966c05151cf51d15_330x104.jpg)****