Javascript JSON

Miyang 發(fā)布于2019-08-22 17:00 / 428人閱讀

摘要：只是一種字符串?dāng)?shù)據(jù)格式，使用它的不僅僅是。對(duì)象在中，定義了全局對(duì)象。用于把對(duì)象序列化為字符串。這個(gè)方法可以使我們不必在乎語(yǔ)法與語(yǔ)法的差異，盡管創(chuàng)建合法的對(duì)象。用于把字符串序列化為值。

JSON只是一種字符串?dāng)?shù)據(jù)格式，使用它的不僅僅是Javascript。

語(yǔ)法

JSON可以表示三種類(lèi)型的值：簡(jiǎn)單值、對(duì)象、數(shù)組

簡(jiǎn)單值

以下是JSON可以辨識(shí)的簡(jiǎn)單值例子：

5
"Hello World!"
false
null

*注意：

undefined不被支持

字符串必須使用雙引號(hào)，單引號(hào)會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤

對(duì)象

在Javascript中，我們可以用對(duì)象字面量的方式創(chuàng)建一個(gè)對(duì)象：

var person = {
    name: "Sue",
    age:  "18"
}

但JSON要求給屬性加雙引號(hào)，上述對(duì)象轉(zhuǎn)換成合法的JSON字符串格式：

{
    "name": "Sue",
    "age":  "18"
}

*注意：

屬性加雙引號(hào)

沒(méi)有變量聲明

沒(méi)有末尾分號(hào)

屬性的值可以是前面介紹的簡(jiǎn)單值，也可以是對(duì)象或數(shù)組

2、3點(diǎn)同樣適用于簡(jiǎn)單值和數(shù)組

數(shù)組

在Javascript中，我們可以創(chuàng)建一個(gè)如下數(shù)組：

var names = ["Sue", "Jane", "Ben"]

上述數(shù)組轉(zhuǎn)換成合法的JSON字符串格式：

["Sue", "Jane", "Ben"]

我們可以將數(shù)組、簡(jiǎn)單值、對(duì)象嵌套使用，創(chuàng)建更加復(fù)雜的JSON字符串，比如：

{
    "teachers": [
        { "name": "Sue", "age": 18, "students": [1, 45, 60]},
        { "name": "Ben", "age": 25, "students": [2, 31, 40]}
    ],
    "students": [
        { "id": 1, "name": "Jane"},
        { "id": 2, "name": "Lee"}
    ]
}

解析與序列化

在JSON之前，web傳輸格式化數(shù)據(jù)都是使用XML，Javascript要想拿到XML中的數(shù)據(jù)，要先將其轉(zhuǎn)換成DOM，而后從中提取數(shù)據(jù)，相比之下，JSON就顯得非常簡(jiǎn)單。

eval

早期解析JSON一般使用eval()，比如：

eval({"name": "Sue"})
{name: "Sue"}

但這種方式存在風(fēng)險(xiǎn)，因?yàn)榉?wù)器返回的數(shù)據(jù)很有可能存在惡意代碼，只要被解析成合法的Javascript語(yǔ)法，就會(huì)被執(zhí)行，比如：

eval("alert("Sue")")

因此不建議使用eval()來(lái)解析JSON字符串。
早期瀏覽器中，可以使用https://github.com/douglascro...。

JSON對(duì)象

在IE 8+、 Firefox 3.5+、 Safari 4+、 Chrome、Opera 10.5+中，ECMAScript定義了全局對(duì)象JSON。

stringify

用于把Javascript對(duì)象序列化為JSON字符串。
*注意：

值為undefined的屬性會(huì)被忽略

函數(shù)及原型成員會(huì)被忽略

不包含縮進(jìn)和空格字符（比如逗號(hào)后的空格）

舉個(gè)例子：

function Person(name, secret) {
    this.name = name;
    this.secret = secret;
    this.makeFriends = function() {
        return this.secret;
    }
}
Person.prototype.sayHi = function() {
    return this.name;
}
var me = new Person("Sue", undefined)
me.makeFriends()
// undefined
me.sayHi()
// "Sue"
var meJSON = JSON.stringify(me);
// "{"name":"Sue"}"

上述例子中，我們創(chuàng)建了一個(gè)Person實(shí)例me，其中secret屬性為undefined，包含makeFriends方法和一個(gè)原型成員sayHi，這些都沒(méi)有被添加到生成的JSON字符串中。
這個(gè)方法可以使我們不必在乎Javascript語(yǔ)法與JSON語(yǔ)法的差異，盡管創(chuàng)建合法的Javascript對(duì)象。

parse

用于把JSON字符串序列化為Javascript值。

var meCopy = JSON.parse(meJSON)
// {name: "Sue"}

*注意：me與meCopy是兩個(gè)獨(dú)立的對(duì)象，實(shí)際編程中，可以使用stringify parse實(shí)現(xiàn)對(duì)象的拷貝。

stringify 選項(xiàng)

JSON.stringify()的第一個(gè)參數(shù)是要序列化的對(duì)象，后面還可以加兩個(gè)參數(shù)，分別是過(guò)濾器和選項(xiàng)。

過(guò)濾器

過(guò)濾器可以是數(shù)組，也可以是函數(shù)，如果是數(shù)組，JSON.stringify()的結(jié)果中將保留數(shù)組中的屬性，比如：

function Person(name, age, secret) {
    this.name = name;
    this.age = age;
    this.secret = secret;
}
var me = new Person("Sue", 18, "none");
var meJSON = JSON.stringify(me, ["name", "age"])
meJSON
// "{"name":"Sue","age":18}"

如果過(guò)濾器是一個(gè)函數(shù)，會(huì)給這個(gè)函數(shù)傳入兩個(gè)參數(shù)，分別是屬性名和屬性值，根據(jù)需要返回要添加到JSON中的屬性值，如果為undefined，會(huì)移除該屬性，比如：

var me = new Person("sue", 25, ["girl", "1024", "Beauty"])
function process(key, value) {
    switch(key) {
        case "name":
            return value.charAt(0).toUpperCase() + value.slice(1);
        case "age":
            return 18;
        case "secret":
            return undefined;
        default:
            return value;
    }
}
var meJSON = JSON.stringify(me, process)
meJSON
// "{"name":"Sue","age":18}"

字符串縮進(jìn)

第三個(gè)參數(shù)用于控制結(jié)果中的縮進(jìn)和空白符，如果這個(gè)參數(shù)是一個(gè)數(shù)值，那么它表示每個(gè)級(jí)別縮進(jìn)的空格數(shù)，比如：

var meJSON = JSON.stringify(me, process, 4)
undefined
meJSON
"{
    "name": "Sue",
    "age": 18
}"

*注意：

只要傳入了縮進(jìn)數(shù)，結(jié)果就會(huì)包含換行符，因?yàn)橹豢s進(jìn)卻不換行沒(méi)什么意義。

最大縮進(jìn)為10，如果超過(guò)10，轉(zhuǎn)換為10

如果第三個(gè)參數(shù)是一個(gè)字符串，那么將使用這個(gè)字符串作為縮進(jìn)，這個(gè)字符串可以是制表符或其他任意字符，如果超過(guò)10位，則僅前10位有效，比如：

var meJSON = JSON.stringify(me, process, "	")
meJSON
"{
    "name": "Sue",
    "age": 18
}"

var meJSON = JSON.stringify(me, process, "****")
meJSON
"{
****"name": "Sue",
****"age": 18
}"

toJSON

當(dāng)需要為某種對(duì)象添加自定義的序列化方法時(shí)，可以給對(duì)象定義toJSON()方法，比如：

Person.prototype.toJSON = function() {
    return this.name;
}
var me = new Person("sue", 25, ["girl", "1024", "Beauty"])
JSON.stringify(me, process, "	")
// ""sue""

上述例子中，我們?cè)?b>Person的原型中添加了toJSON方法，發(fā)現(xiàn)調(diào)用JSON.stringify時(shí)，只序列化了name屬性。
序列化的內(nèi)部順序如下：
No. 1 如果存在toJSON()，而且它能返回有效的值，則調(diào)用它，否則，返回對(duì)象本身
No. 2 如果提供了過(guò)濾器參數(shù)，則基于第一步返回的值調(diào)用過(guò)濾器
No. 3 序列化第二步的返回值
No. 4 如果提供了縮進(jìn)，則格式化第三步的返回值

parse 選項(xiàng)

JSON.parse()可以接收第二個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)還原函數(shù)，將在每個(gè)鍵值對(duì)上調(diào)用，這個(gè)函數(shù)接收兩個(gè)參數(shù)，分別是鍵和值，返回處理過(guò)的值，比如：

var birth = new Date(1993, 10, 24)
JSON.stringify(birth)
// ""1993-11-23T16:00:00.000Z""
var birthJSON = JSON.stringify(birth)
var birthCopy = JSON.parse(birthJSON, function(key, value) {
    return new Date(value)
})
birthCopy.getFullYear()
// 1993