快捷導(dǎo)航

詳解JavaScript中JSON.stringify方法

更新時(shí)間：2023年09月06日 08:29:18 作者：編程三昧

JSON 對(duì)象是我們經(jīng)常使用的一種數(shù)據(jù)存儲(chǔ)對(duì)象,它的適用范圍非常廣,JSON.stringify 方法可以幫我們把一個(gè)對(duì)象或數(shù)組轉(zhuǎn)換成一個(gè) JSON字符串,本文我們給大家詳細(xì)介紹一下JavaScript中JSON.stringify方法,需要的朋友可以參考下

要實(shí)現(xiàn)對(duì)象的深拷貝時(shí)，我們可以用 JSON 對(duì)象的 JSON.stringify 和 JSON.parse 來(lái)拷貝一個(gè)完全一樣的對(duì)象，而不會(huì)對(duì)原對(duì)象產(chǎn)生任何引用關(guān)系。
在使用 localStorage 時(shí)，也會(huì)用到它，因?yàn)?localStorage 只能存儲(chǔ)字符串格式的內(nèi)容，所以，我們?cè)诖嬷?，將?shù)值轉(zhuǎn)換成 JSON字符串。

JSON.stringify

JSON.stringify 方法可以幫我們把一個(gè)對(duì)象或數(shù)組轉(zhuǎn)換成一個(gè) JSON字符串。

我們通常只會(huì)用到它的第一個(gè)參數(shù)，其實(shí)它還有另外兩個(gè)參數(shù)，可以讓它實(shí)現(xiàn)一些非常好用的功能。

語(yǔ)法：

JSON.stringify(value[, replacer [, space]])

參數(shù)：

value：將要被序列化的變量的值
replacer：替代器?？梢允呛瘮?shù)或者是數(shù)組：
- 如果是一個(gè)函數(shù)，則value 每個(gè)屬性都要經(jīng)過(guò)這個(gè)函數(shù)的處理，該函數(shù)的返回值就是最后被序列化后的值。
- 如果是一個(gè)數(shù)組，則要求該數(shù)組的元素是字符串，且這些元素會(huì)被當(dāng)做value 的鍵（key）進(jìn)行匹配，最后序列化的結(jié)果，是只包含該數(shù)組每個(gè)元素為key 的值。
space：指定輸出數(shù)值的代碼縮進(jìn)，美化格式之用，可以是數(shù)字或者字符串：
- 如果是數(shù)字（最大為10）的話，代表每行代碼的縮進(jìn)是多少個(gè)空格。
- 如果是字符串的話，該字符串（最多前十個(gè)字符）將作顯示在每行代碼之前。

這時(shí)候，你應(yīng)該知道了。我們可以用 JSON.stringify 來(lái)做序列化時(shí)的過(guò)濾，相當(dāng)于我們可以自定義JSON.stringify 的解析邏輯。

使用函數(shù)過(guò)濾并序列化對(duì)象

function replacer(key, value) {
    if (typeof value === "string") {
        return undefined;
    }
    return value;
}
var foo = {
    foundation: "Mozilla",
    model: "box",
    week: 45,
    transport: "car",
    month: 7
};
var jsonString = JSON.stringify(foo, replacer); // {"week":45,"month":7}

使用數(shù)組過(guò)濾并序列化對(duì)象

const user = {
    name: "zollero",
    nick: "z",
    skills: ["JavaScript", "CSS", "HTML5"]
};
JSON.stringify(user, ["name", "skills"], 2); 
// "{//   "name": "zollero",//   "skills": [//     "JavaScript",//     "CSS",//     "HTML5"http://   ]// }"

還有一個(gè)有意思的東西，是對(duì)象的toJSON 屬性。

如果一個(gè)對(duì)象有toJSON 屬性，當(dāng)它被序列化的時(shí)候，不會(huì)對(duì)該對(duì)象進(jìn)行序列化，而是將它的toJSON 方法的返回值進(jìn)行序列化。

看下面的例子：

var obj = {
    foo: "foo",
    toJSON: function () {
        return "bar";
    }
};
JSON.stringify(obj); 
// '"bar"'JSON.stringify({x: obj}); // '{"x":"bar"}'

總結(jié)

stringify 方法的重點(diǎn)和難點(diǎn)在于第二和第三個(gè)參數(shù)的靈活使用上，需要多加練習(xí)。

到此這篇關(guān)于詳解JavaScript中JSON.stringify方法的文章就介紹到這了,更多相關(guān)JavaScript JSON.stringify方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: