介紹

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

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

語法

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

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

replacer：可選參數(shù)

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

space：可選參數(shù)

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

異常情況

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

案例

value

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

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

// 基礎(chǔ)值和對象
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)換為對應(yīng)的基本類型。'[1, "true", true]'
JSON.stringify(undefined) // 單獨轉(zhuǎn)換，undefined
JSON.stringify(function () {}) // 單獨轉(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ù)組對象中，則會被忽略，'{}'
?
// 以Symbol為鍵的屬性都會被忽略
JSON.stringify({[Symbol('key')]: 'value'}) // '{}', 忽略Symbol
JSON.stringify({[Symbol('key')]: 'value'}, [Symbol('key')]) // '{}', 就算數(shù)組中包含也會忽略
JSON.stringify({[Symbol('key')]: 'value'}, function (k, v) {
    if (k === 'symbol') {
        return 'symbol'
    }
}) // undefined, 就算是在replacer中強制指定，也會被忽略
?
JSON.stringify(NaN) // null
JSON.stringify(null) // null
JSON.stringify(Infinity) // null

replacer

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

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，則該屬性不會顯示在JSON字符串中
// 如果返回為對象，則該對象遞歸調(diào)用replacer序列化成JSON字符串
// 如果返回為函數(shù)，則該函數(shù)不會被序列化成JSON字符串
// 由于存在遞歸調(diào)用，因此需要避免超出最大調(diào)用棧
?
jsonStr = JSON.stringify(obj, ['bool', 'num']) // '{"bool": false, "num": 10}', 如果是數(shù)組，則僅會序列化數(shù)組中的屬性

space

用來控制序列化后的JSON字符串里面空格的間距。如果是數(shù)字，則表示縮進多少個空格；如果是字符串，則用該字符串代替空格。space的最大長度為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

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

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

總結(jié)

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

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

最新評論