JSON基礎使用詳解

時間 2020-07-14

原文原文鏈接

JSON：JavaScript對象表示法

1.1 JSON說明

曾經一段時間，XML是互聯網傳遞數據的統一標準，可是業界一直不乏質疑XML的人士，他們都認爲XML過於繁瑣，冗長；提取數據也過於麻煩javascript

2006年，JSON被提交給了IETF；在這以後，JSON逐漸發展起來，在互聯網上獲得普遍應用；java

咱們要記住：JSON只是一種數據格式，主要用來傳遞數據，並非一種編程語言，雖然與JavaScript的語法類似，可是並非JavaScript才使用JSON，畢竟JSON只是一種數據格式，不少編程語言都有針對JSON的解析器和序列化器編程

1.2 JSON語法

（1）基礎語法：json

將JavaScript數據轉化爲JSON數據，也叫——序列化

// 把JavaScript對象序列化成JSON字符串
var jsonText = JSON.stringify(book);

將JSON數據轉化爲JavaScript數據，也叫——解析

// 將JSON對象解析成原生JavaScript值
var js = JSON.parse(jsonText);

（2）JSON能夠表示如下三種類型的數據：數組

簡單值：能夠在JSON裏面表示 數值、字符串、布爾值、null；不支持 undefined編程語言

對象：複雜數據類型，保存一組鍵值對；在JSON裏，對象的鍵必定要加雙引號，值能夠是簡單值，也能夠是複雜數據類型的值函數

數組：複雜數據類型，保存一組值；值能夠是簡單值，也能夠是複雜數據類型的值this

JSON不支持變量，函數，對象實例等，它只是一種表示數據的格式，裏面只用來存儲數據，不會有邏輯、操做等代碼在裏面code

簡單值，簡單值中的字符串必須使用雙引號，使用單引號報錯對象
```
number、string、bool、null
```
對象，直接使用{ }符號，沒有變量，括號後面不用加分號；同一個對象中不該該有相同的屬性，如下兩個location屬性，分別屬於不一樣對象，這樣是沒有問題的；
```
{
    "name": "過青年",
    "age": 20,
    "arr": [1,2,3,4],
    "location": "江西宜春",
    "school": {
        "location": "江西南昌"
    }
}
```
數組，直接使用[ ]符號，裏面簡單值和複雜數據類型能夠組合使用，構成更復雜的數據集合；
```
[
    20,
    {
        "name": "過青年",
    	"age": 20
    },
    [1,2,3],
    "過青年"
]
```

對象和數組通常是JSON數據最外層的結構，利用它們能夠創造出各類各樣的數據集合

1.3 序列化和解析

1.31 序列化選項

（1）過濾結果

JSON.stringify(js對象,過濾器參數)方法能夠傳遞兩個參數

若是過濾器參數是數組，那麼JSON.stringify( )的結果將只包含數組中列出的屬性

var obj = {
    name: "過青年",
    age: 20,
    arr: [1,2,3,4],
    location: "江西宜春",
    school: {
        location: "江西南昌"
    }
}

console.log(JSON.stringify(obj,["name","age","arr"]));
// {"name":"過青年","age":20,"arr":[1,2,3,4]}

若是過濾器參數是函數(過濾函數)，能夠改變序列化對象的結果；函數第一個參數默認是屬性名(鍵)，第二個參數默認是屬性值

若是返回的是undefined，則相應的屬性名和屬性值會被忽略

var jsonText = JSON.stringify(obj,function(key,value){
    switch (key) {
        case "name":
            return 20;
        case "age":
            return "過青年";
        case "arr":
            return [4,3,2,1];
        case "school":
            return undefined;
        default:
            return value;
    }
});

console.log(jsonText);
// {"name":20,"age":"過青年","arr":[4,3,2,1],"location":"江西宜春"}

（2）格式化：字符串縮進、空白符

第三個參數控制縮進和空白符；

若是是一個數值，表示空白字符個數，最大爲10，大於10的轉換成10；若是第三個參數是有效參數，會自動幫咱們插入換行符，提升可讀性；

var jsonText = JSON.stringify(obj,null,4);
console.log(jsonText);
/*
{
    "name": "過青年",
    "age": 20,
    "arr": [
        1,
        2,
        3,
        4
    ],
    "location": "江西宜春",
    "school": {
        "location": "江西南昌"
    }
}
*/

若是是一個字符串，這個字符串將被做爲縮進字符，而非原來的空白字符做爲縮進；字符串參數裏的字符個數不能超過10個，超過10個，結果中只出現前十個字符；

var jsonText = JSON.stringify(obj,null,"-");
console.log(jsonText);
/*
{
-"name": "過青年",
-"age": 20,
-"arr": [
--1,
--2,
--3,
--4
-],
-"location": "江西宜春",
-"school": {
--"location": "江西南昌"
-}
}
*/

（3）toJSON方法

咱們能夠在須要序列化的對象上增長一個toJSON方法，這樣當使用JSON.stringify()方法時，實際上就是調用了對象中的toJSON()方法

var obj = {
    name: "過青年",
    age: 20,
    arr: [1,2,3,4],
    location: "江西宜春",
    school: {
        location: "江西南昌"
    },
    toJSON:function(){
        return this.name;
    }
}
var jsonText = JSON.stringify(obj);
console.log(jsonText);
// 過青年

（4）把一個對象傳入JSON.stringify()中，序列化該對象的順序以下：

<1> 若是該對象中有toJSON方法，則直接調用該方法；

<2> 若是JSON.stringify()中有第二個參數，則應用過濾器，過濾器接受的值就是<1>中返回的值

<3> 過濾器處理<1>中返回的值

<4> 若是有第三個參數，執行相應的格式化

var obj = {
    name: "過青年",
    age: 20,
    arr: [1,2,3,4],
    location: "江西宜春",
    school: {
        "location": "江西南昌"
    },
    toJSON:function(){
        name = this.name;
        age = this.age;
        return {name,age};
    }
}
var jsonText = JSON.stringify(obj,function(key,value){
    if(key === "name") {
        return "哈哈哈";
    }else{
        return value;
    }
});
console.log(jsonText); // {"name":"哈哈哈","age":20}

理解序列化對象的過程仍是很重要的

1.31 解析選項

JSON.parse()方法也有兩個參數，第二個參數是一個函數，叫作還原函數

var obj = {
    name: "過青年",
    age: 20,
    arr: [1,2,3,4],
    location: "江西宜春",
    school: {
        "location": "江西南昌"
    }
};
var jsonText = JSON.stringify(obj);
var jsText = JSON.parse(jsonText,function(key,value){
    if (key === "name") {
        return "哈哈哈哈";
    } else {
        return value;
    }
});
console.log(jsText);
//{name: '哈哈哈哈', age: 20, arr: Array(4), location: '江西宜春', school: {…}}