JSON理解與使用

JSON是什麼？

json是一種數據結構，並不叢屬於Js。

語法

JSON的語法能夠表示下面三種值：

• 簡單值：字符串，數組，布爾值和null。

//json的字符串必須使用雙引號
'hello'

• 對象

//注意：
//1.末尾不要有分號
//2.對象的屬性值必定要加雙引號
{
    "name":"Mary",
    "age":21
}

• 數組

['Mary','Lily','Jim']

• JSON不支持變量，函數和對象實例。

  解析與序列化

1. JSON.stringify()

   此方法用於將JavaScript對象序列化爲JSON字符串，可接受三個參數。
   • 第一個參數是要序列化的json數據。
   • 第二個參數能夠是一個數組或者函數，起到過濾器的做用。
   • 第三參數爲一個數組，表示縮進的空格數，最大縮進數爲10，大於10會轉化爲10

第二個參數爲數組

//結果顯示返回值與第二個參數數組中的屬性對應
    var student={
    "name":"Mary",
    "age":22,
    "course":["English","Math"],
    "class":1
}
var test1=JSON.stringify(student,["age","name"]);

結果顯示返回值與第二個參數數組中的屬性對應

第二個參數爲數組

var student={
    "name":"Mary",
    "age":22,
    "course":["English","Math"],
    "class":1
}
//返回undefined表示刪除該屬性
//能夠返回自定義後的值
var test2=JSON.stringify(student,function(key,value){
    switch(key){
        case "name":
        return undefined;
        case "age":
        return value+1;
        case "class":
        return 2;
        default:
        return value;
    }
});

結果：

//縮進4個空格
var test3=JSON.stringify(student,null,4);
//將縮進換成製表符
var test3=JSON.stringify(student,null,"--");

1. toJSONf()
   能夠爲任何添加toJSON()方法，能夠讓toJSON()方法返回任何序列化的值，也能夠返回undefined,若是toJSON()嵌套在另外一個對象中,會返回null.

var studentTwo={
    "name":"Mary",
    "age":22,
    "course":["English","Math"],
    "class":1,
    toJSON:function(){
        return this.name;
    }
}
var test3=JSON.stringify(studentTwo);

只顯示了name屬性

toJSON()能夠作過濾器的補充，可是須要理解序列化的內部順序

解析選項

JSON.parse()方法

將JSON字符串解析爲原生的JavaScript值。

//data是一個JSON字符串
var test4=JSON.parse(data);

JSON.stringify還能夠接收另外一個參數，該參數爲一個函數，與JSON.stringify的過濾相比，這個函數的做用是還原。

var studentThree={
    "name":"Mary",
    "age":22,
    "course":["English","Math"],
    "date":new Date(2019,9,10),
    "class":1
}
var test5=JSON.stringify(studentThree);
alert(test5);

結果json字符串

var test6=JSON.parse(test5);
alert(test6.date);

結果爲2019-10-09T16:00:00.000Z

//若是還原函數返回undefined，表示要刪除該函數，若是返回其餘值，表示將該值插入到結果中
var test7=JSON.parse(test5,function(key,value){
    if(key==="date"){
        return new Date(value);
    }else{
        return value;
    }
});
alert(test7);

結果爲一個對象

alert(test7.date);

結果：Thu Oct 10 2019 00:00:00 GMT+0800 (中國標準時間)