介紹

什么是序列化，序列化就是將對(duì)象數(shù)據(jù)轉(zhuǎn)換為可以存儲(chǔ)或者傳輸?shù)倪^(guò)程。在js中，經(jīng)常使用JSON來(lái)進(jìn)行數(shù)據(jù)的序列化和反序列化，需要注意的是JavaScript不是JSON，JSON也不是JavaScript。

雖然JSON是基于JavaScript語(yǔ)法，但是JSON并不是Javascript的子集。JSON序列化是將對(duì)象或值轉(zhuǎn)換為JSON字符串，并提供對(duì)應(yīng)的解析JSON字符串的方法。

語(yǔ)法

JSON.stringify(value[, replacer [, space]])可將一個(gè)js對(duì)象或值轉(zhuǎn)換為JSON字符串，其一共有三個(gè)參數(shù)，如果指定了replacer且為函數(shù)，則被序列化的每一個(gè)值都會(huì)經(jīng)過(guò)此函數(shù)的處理；如果replacer為數(shù)組，則只有在數(shù)組中的屬性才會(huì)被序列化。

value：將要被序列化的值，可為js對(duì)象或普通值

replacer：可選參數(shù)

• 如果該參數(shù)指定為一個(gè)函數(shù)，則在序列化的過(guò)程中，被序列化的值的每一個(gè)屬性都將經(jīng)過(guò)函數(shù)的轉(zhuǎn)換和處理，最終的JSON字符串將與函數(shù)有關(guān)
• 如果該參數(shù)指定為一個(gè)數(shù)組，則在序列化的過(guò)程中，只有包含在數(shù)組中的屬性名才會(huì)被序列化，最終的JSON字符串與原數(shù)據(jù)相比是做了“過(guò)濾”
• 如果該參數(shù)未指定、指定為null或指定為其他值，則在序列化的過(guò)程中，所有的屬性都將被序列化

space：可選參數(shù)

• 指定用于縮進(jìn)的空白字符串個(gè)數(shù)
• 如果參數(shù)的值為數(shù)字，則表示有多少個(gè)空格；最大值為10，若小于1，則表示沒(méi)有空格
• 如果參數(shù)的值為字符串，則該字符串被視為空格，用于美化輸出；如果字符串長(zhǎng)度超過(guò)10，則截取前10
• 如果沒(méi)有提供，或提供為null，則表示沒(méi)有空格

異常情況

• 嘗試轉(zhuǎn)換循環(huán)引用時(shí)，會(huì)拋出異常
• 嘗試轉(zhuǎn)換BigInt類型時(shí)，也會(huì)拋出異常
• 如果不確定被轉(zhuǎn)換數(shù)據(jù)的類型，可將JSON.stringify()放入try/catch中執(zhí)行

案例

value

將對(duì)象或值轉(zhuǎn)換為JSON字符串

• 如果被轉(zhuǎn)換對(duì)象中含有toJSON() 方法，則最終的JSON字符串有toJSON()決定，因此需要注意不能在方法中輕易覆蓋此方法。
• 非數(shù)組對(duì)象在被序列化后，不保證其屬性還是按照特定的順序出現(xiàn)在JSON字符串
• 布爾值、數(shù)字、字符串的包裝類型，即通過(guò)new Boolean()、new Number()、new String()創(chuàng)建的數(shù)據(jù)，在轉(zhuǎn)換時(shí)會(huì)自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的基本數(shù)據(jù)類型
• 函數(shù)、undefined單獨(dú)被轉(zhuǎn)換時(shí)，會(huì)返回undefined；函數(shù)、undefined、symbol在序列化過(guò)程中，如果出現(xiàn)在數(shù)組中則轉(zhuǎn)換為null，如果為非數(shù)組的屬性則會(huì)被忽略
• 無(wú)法轉(zhuǎn)換存在循環(huán)引用的對(duì)象
• NaN、Infinity、null都會(huì)被轉(zhuǎn)換為null
• 所有以symbol為鍵的屬性都會(huì)被忽略掉，即使在replacer函數(shù)中強(qiáng)制指定了需要包含這些屬性
• 其他類型的對(duì)象，則僅會(huì)序列化可枚舉屬性

// 基礎(chǔ)值和對(duì)象
JSON.stringify({}) // '{}'
JSON.stringify('str') // '"str"'
JSON.stringify("str") // '"str"'
JSON.stringify(true) // 'true'
?
JSON.stringify([new Number(2), new String('true'), new Boolean(true)]) // 包裝類型，轉(zhuǎn)換為對(duì)應(yīng)的基本類型。'[1, "true", true]'
JSON.stringify(undefined) // 單獨(dú)轉(zhuǎn)換，undefined
JSON.stringify(function () {}) // 單獨(dú)轉(zhuǎn)換，undefined
JSON.stringify([undefined, function () {}, Object, Symbol(1)]) // 如果出現(xiàn)在數(shù)組中，則轉(zhuǎn)換為null，'[null, null,null, null]'
JSON.stringify({x:undefined, y:function () {}, Object, z:Symbol(1)}) // 如果出現(xiàn)在非數(shù)組對(duì)象中，則會(huì)被忽略，'{}'
?
// 以Symbol為鍵的屬性都會(huì)被忽略
JSON.stringify({[Symbol('key')]: 'value'}) // '{}', 忽略Symbol
JSON.stringify({[Symbol('key')]: 'value'}, [Symbol('key')]) // '{}', 就算數(shù)組中包含也會(huì)忽略
JSON.stringify({[Symbol('key')]: 'value'}, function (k, v) {
    if (k === 'symbol') {
        return 'symbol'
    }
}) // undefined, 就算是在replacer中強(qiáng)制指定，也會(huì)被忽略
?
JSON.stringify(NaN) // null
JSON.stringify(null) // null
JSON.stringify(Infinity) // null

replacer

replacer可以是一個(gè)函數(shù)，也可是一個(gè)數(shù)組。如果是函數(shù)，則有兩個(gè)參數(shù)，分別為key和value，兩者都可以被序列化；如果是數(shù)組，則僅在數(shù)組中的屬性會(huì)被序列化。

function replacer (key, value) {
    if (typeof value === 'boolean') {
        return undefined;
    } else if (typeof value === 'string') {
        return {
            flag: true
        }
    } else if (typeof value === 'number') {
        return function () {
            console.log('value', value)
        }
    } else if (Array.isArray(value)) {
        return {
            isArr: true
        };
    }
    return value
}
let obj = {
    bool: false,
    str: 'hello',
    num: 10,
    arr: [20]
}
let jsonStr = JSON.stringify(obj, replacer); // '"str": {}, "arr": {}'
// 如果返回為undefined，則該屬性不會(huì)顯示在JSON字符串中
// 如果返回為對(duì)象，則該對(duì)象遞歸調(diào)用replacer序列化成JSON字符串
// 如果返回為函數(shù)，則該函數(shù)不會(huì)被序列化成JSON字符串
// 由于存在遞歸調(diào)用，因此需要避免超出最大調(diào)用棧
?
jsonStr = JSON.stringify(obj, ['bool', 'num']) // '{"bool": false, "num": 10}', 如果是數(shù)組，則僅會(huì)序列化數(shù)組中的屬性

space

用來(lái)控制序列化后的JSON字符串里面空格的間距。如果是數(shù)字，則表示縮進(jìn)多少個(gè)空格；如果是字符串，則用該字符串代替空格。space的最大長(zhǎng)度為10

JSON.stringify({
    x: 10,
    y: 20
}, null, 4); // '{\n    "x": 10,\n    "y": 20\n}'
JSON.stringify({
    x: 10,
    y: 20
}, null, 'hello'); // '{\nhello"x": 10,\nhello"y": 20\n}'

toJSON

如果一個(gè)被序列化的對(duì)象擁有toJSON方法，則該方法就會(huì)覆蓋默認(rèn)的序列化行為，即不是該對(duì)象被序列化，而是調(diào)用toJSON方法后返回的值被序列化。

let obj = {
    x: 10,
    y: 30,
    toJSON: function() {
        return {z: 40};
    }
};
JSON.stringify(obj); // '30',序列化的是toJSON返回的值，而不是整個(gè)對(duì)象
JSON.stringify({x: obj}, function(k, v) {
    if (v.z == 40) {
        return {z: 50}
    }
    return v;
}); // '{"x":{"z":50}}'，使用replacer函數(shù)處理的也是處理的是toJSON返回的值，而不是整個(gè)對(duì)象

總結(jié)

• JSON可使用stringify方法實(shí)現(xiàn)對(duì)象或值的序列化
• replacer參數(shù)可以是函數(shù)，也可以是數(shù)組。函數(shù)用來(lái)處理被序列化的值的每一個(gè)屬性，數(shù)組表示只序列化哪些屬性，兩者可以在某些場(chǎng)景下實(shí)現(xiàn)相同的效果
• 被序列化的對(duì)象如果有toJSON方法，則序列化的是該方法返回的值
• JSON.stringify可與localStorage結(jié)合使用，用于存儲(chǔ)登錄信息等；也可用于簡(jiǎn)單的深拷貝
• 合理使用第二個(gè)參數(shù)replacer，可更好的處理序列化對(duì)象時(shí)可能被忽略、轉(zhuǎn)換的屬性值
• 在序列化時(shí)可能會(huì)拋出異常，可將其放入try/catch中執(zhí)行

以上就是JavaScript語(yǔ)法 JSON序列化之stringify實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript JSON 序列化 stringify的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論