01JSON

1.JSON

1.1概念

JSON(JavaScript Object Nation)JAvaScript对象表示法，是用来储存和交换轻量级文本信息的语法，JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

1.2JSON/语法

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称(兼)/值对中 key:value
数据由逗号分隔
大括号{}保存对象
中括号[]保存数组，数组可以存多个对象
```
let jsonObject = {"name":"Bob","age":18}
```

JSON值：

数字(整数或浮点)
字符串(在双引号中)
逻辑值(false,true)
数组(在中括号中)
对象(在大括号中)

null

let jsonObject = {
  "age":18,
  "name":"TanPengfei",
  "isMarried":false,
  "abilitiy":{"software":"c c++","hardware":"fpga verilog"},
  "roomMates":[
      {"name":"Hanqi","age":18},
      {"name":"Tainhao","age":18},
      {"name":"Zhiliang","age":18},
  ]
}

//从JSON对象中取数据
console.log(jsonObject.name)  //TanPengfei
console.log(jsonObject.ability.software) //c c++
console.log(jsonObject.roomMates[0].name)  //Hanqi

1.3JSON文件

JSON文件的文件类型是.json
JSON文本的MIME类型为application/json

2.JSON对象

2.1语法

JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。每个 key/value 对使用逗号(,)分割。

使用.来访问对象的值

var myObj, x
myObj = { "name":"runoob", "alexa":10000, "site":null }
//使用 . 来访问对象的值
x = myObj.name //"runoob"
//使用 [] 来访问对象的值
x = myObj["name"] //"runoob"

2.2循环对象与嵌套对象

使用for-in来循环对象的属性

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

嵌套对象

myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

2.3操做对象属性

修改：与普通的js对象的操作一样

//方法1
myObj.sites.site1 = "www.google.com";
//方法2
myObj.sites["site1"] = "www.google.com";

删除：使用 delete 关键字来删除 JSON 对象的属性

//方法1
delete myObj.sites.site1;
//方法2
delete myObj.sites.site1;

3.JSON数组(基本与json对象一致)

4.JSON的两大方法

4.1 JSON.parse()

语法：JSON.parse(text[, reviver])
- text:必需，一个有效的 JSON 字符串
- reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数

实例：

//通过使用AJAX从服务器请求JSON数据，并解析出js对象
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();


3. 注意：

   - JSON 不能存储 Date 对象。如果你需要存储 Date 对象，需要将其转换为字符串。之后再将字符串转换为 Date 对象。

     ```
     var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
     var obj = JSON.parse(text);
     obj.initDate = new Date(obj.initDate);
      
     document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;
     ```

     

   - JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数

     ```
     var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
     var obj = JSON.parse(text);
     obj.alexa = eval("(" + obj.alexa + ")");
      
     document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();
     
     ```

     

### 4.2JSON.stringify()

1. 语法：JSON.stringify(value[, replacer[, space]])
- **value:**必需， 要转换的 JavaScript 值（通常为对象或数组）。
- **replacer:**可选。用于转换结果的函数或数组。
- **space:**可选，文本添加缩进、空格和换行符

2. 对象转换

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};


3. 注意
- JSON 不能存储 Date 对象。JSON.stringify() 会将所有日期转换为字符串。
- JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。