什么都不会的学习之路——JSON

JSON

1.介绍

JSON： JavaScript Object Notation(JavaScript 对象表示法)

​ 存储交换文本信息

var JSONObject= {
    "name":"json对象",
    "url":"https://baike.baidu.com/item/JSON/2462549", 
    "introduce":"一个简单的JSON对象"
};

2. 语法

• key与value被 **“ ”**包裹
• 数据用**，**分隔
• 保存对象 { }
• 保存数组 [ ]

1. 数字

   {"age":30}
   

2. 对象

   {
       "name":JSON,
     	"age":18,
      	"url":"https://baike.baidu.com/item/JSON/2462549"
   }
   

3. 数组

   可包含多个对象

   {
       "demo":[
           { "name":"百度" , "url":"www.baidu.com" }, 
           { "name":"google" , "url":"www.google.com" }, 
           { "name":"微博" , "url":"www.weibo.com" }
       ]
   }
   

3.对象

1. 访问值

   通过 . 或 [ ] 去访问对象的值

   //.
   var jsonObj,x;
   jsonObj = {"name":"JSON","url":null};
   x = jsonObj.name;
   alert(x)
   //[]
   var jsonObj,x;
   jsonObj = {"name":"JSON","url":null};
   x = jsonObj["name"];
   alert(x)
   

2. 循环对象

   通过 for-in 循环对象属性

   **[ ]**访问属性的值

   var jsonObj = {"name":"JSON","url":null};
   for(x in jsonObj){
       alert(x)
   }
   //[]
   var jsonObj = {"name":"JSON","url":null};
   for(x in jsonObj){
       alert(jsonObj[x])
   }
   

3. 嵌套对象

   可以使用 . 或 [ ] 来访问嵌套的 JSON 对象

   var jsonObj = {
       "name":"JSON",
       "url":null,
       "demo": { 
           "name":"百度" , 
           "url":"www.baidu.com" 
       }, 
   };
   //访问嵌套的demo对象
   x = jsonObj.demo.name
   //或
   x = jsonObj.demo["name"]
   

4. 修改值

   可以使用 . 或 [ ] 来修改对象的值

   //修改name的值
   jsonObj.name = "baidu"
   //或
   jsonObj["name"] = "baidu"
   

5. 删除对象属性

   delete jsonObj.name
   

4.数组

var jsonObj = {
    "name":"网站",
    "num":3,
    "sites":[ "baidu", "Google", "weibo" ]
}

1. 使用索引值访问数组

   jsonObj.sites[0]
   

2. for / for in循环遍历

   for (i in jsonObj.sites) {
       x += myObj.sites[i] + "<br>";
   }
   

3. 嵌套对象中的数组

   var jsonObj = {
       "name":"网站",
       "num":3,
       "sites":[
           { "name":"Google", "info":[ "Google 搜索", "Google 翻译" ] },
           { "name":"Taobao", "info":[ "淘宝", "网购" ] }
       ]
   }
   //循环遍历
   for (i in myObj.sites) {
       x += "<h1>" + jsonObj.sites[i].name + "</h1>";
       for (j in jsonObj.sites[i].info) {
           x += jsonObj.sites[i].info[j] + "<br>";
       }
   }
   

4. 修改数组元素

   与对象一致

5. 删除数组元素

   与对象一致

5.JSON.parse()

用于与服务器交换数据，接收服务器数据时是字符串形式，使用json.parse()将数据转化为js对象

//text —— 有效的字符串
//reviver —— 转换结果的函数， 将为对象的每个成员调用此函数。
JSON.parse(text[, reviver])

解析

//假设从服务器收到以下数据
{ "name":"baidu", "site":"www.baidu.com" };
//解析
var obj = JSON.parse('{"name":"baidu", "site":"www.baidu.com"}')

6.JSON.stringify()

用于与服务器交换数据，向服务器发送数据时是字符串形式，使用json.stringify()将js对象转化为字符串

var obj = { "name":"baidu", "site":"www.baidu.com" };
var myJSON = JSON.stringify(obj);

注：

1. JSON不能存储Data对象，但可以进行对象与字符串的转化
2. JSON不允许包含函数，json.stringify()转化后会删除js对象函数

7. eval()函数

解析 JSON 文本，然后生成 JavaScript 对象

var obj = eval ("(" + txt + ")");

var txt = '{ "sites" : [' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';
 
var obj = eval ("(" + txt + ")");
 
document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url

le.com" },’ +
‘{ “name”:“微博” , “url”:“www.weibo.com” } ]}’;

var obj = eval (“(” + txt + “)”);

document.getElementById(“name”).innerHTML=obj.sites[0].name
document.getElementById(“url”).innerHTML=obj.sites[0].url