JS?JSON.stringify()的5個使用場景詳解
前言
JSON.stringify()
方法將一個 JavaScript 對象或值轉(zhuǎn)換為 JSON 字符串,如果指定了一個 replacer
函數(shù),則可以選擇性地替換值,或者指定的 replacer
是數(shù)組,則可選擇性地僅包含數(shù)組指定的屬性。
語法如下:
JSON.stringify(value[, replacer [, space]])
- 第一個參數(shù)
value
:將要序列化成 一個 JSON 字符串的值。 - 第二個參數(shù)
replacer
:可選參數(shù),如果該參數(shù)是一個函數(shù),則在序列化過程中,被序列化的值的每個屬性都會經(jīng)過該函數(shù)的轉(zhuǎn)換和處理;如果該參數(shù)是一個數(shù)組,則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中;如果該參數(shù)為null
或者未提供,則對象所有的屬性都會被序列化。 - 第三個參數(shù)
space
:可選參數(shù),指定縮進(jìn)用的空白字符串,用于美化輸出(pretty-print
);如果參數(shù)是個數(shù)字,它代表有多少的空格;上限為10
。該值若小于1
,則意味著沒有空格;如果該參數(shù)為字符串(當(dāng)字符串長度超過 10 個字母,取其前 10 個字母),該字符串將被作為空格;如果該參數(shù)沒有提供(或者為 null),將沒有空格。
第二個參數(shù)replacer 為數(shù)組
是的,JSON.stringify()
函數(shù)可以有第二個參數(shù),它是要在控制臺中打印的對象的鍵數(shù)組。下面來看看示例:
const arrayData = [ { id: "0001", type: "donut", name: "Cake", ppu: 0.55, batters: { batter: [ { id: "1001", type: "Regular" }, { id: "1002", type: "Chocolate" }, { id: "1003", type: "Blueberry" }, { id: "1004", type: "Devil's Food" }, ], }, topping: [ { id: "5001", type: "None" }, { id: "5002", type: "Glazed" }, { id: "5005", type: "Sugar" }, { id: "5007", type: "Powdered Sugar" }, { id: "5006", type: "Chocolate with Sprinkles" }, { id: "5003", type: "Chocolate" }, { id: "5004", type: "Maple" }, ], }, ]; console.log(JSON.stringify(arrayData, ["name"])); // [{"name":"Cake"}]
可以通過在第二個參數(shù)中將其作為數(shù)組傳遞僅需要打印的鍵,而不需要打印整個 JSON 對象。
第二個參數(shù)replacer 為函數(shù)
還可以將第二個參數(shù)作為函數(shù)傳遞,根據(jù)函數(shù)中編寫的邏輯評估每個鍵值對。如果返回 undefined
鍵值對將不會打印。請看下面示例:
const user = { name: "DevPoint", age: 35, }; const result = JSON.stringify(user, (key, value) => typeof value === "string" ? undefined : value ); console.log(result); // {"age":35}
上述代碼的輸出,可以用來過濾 JSON 數(shù)據(jù)的屬性值。
第三個參數(shù)為 Number
第三個參數(shù)控制最終字符串中的間距。如果參數(shù)是一個數(shù)字,則字符串化中的每個級別都將縮進(jìn)此數(shù)量的空格字符。
const user = { name: "DevPoint", age: 35, address: { city: "Shenzhen", }, }; console.log(JSON.stringify(user, null, 4));
輸出打印的字符串格式如下:
{
"name": "DevPoint",
"age": 35,
"address": {
"city": "Shenzhen"
}
}
第三個參數(shù)為 String
如果第三個參數(shù)是一個字符串,它將被用來代替上面顯示的空格字符。
const user = { name: "DevPoint", age: 35, address: { city: "Shenzhen", }, }; console.log(JSON.stringify(user, null, "|---"));
輸出打印的字符串格式如下:
{
|---"name": "DevPoint",
|---"age": 35,
|---"address": {
|---|---"city": "Shenzhen"
|---}
}
toJSON 方法
有一個名為 toJSON
的方法,它可以是任何對象的一部分作為其屬性。 JSON.stringify
返回此函數(shù)的結(jié)果并將其字符串化,而不是將整個對象轉(zhuǎn)換為字符串。
//Initialize a User object const user = { name: "DevPoint", city: "Shenzhen", toJSON() { return `姓名:${this.name},所在城市:${this.city}`; }, }; console.log(JSON.stringify(user)); // "姓名:DevPoint,所在城市:Shenzhen"
總結(jié)
到此這篇關(guān)于JS JSON.stringify()使用場景詳解的文章就介紹到這了,更多相關(guān)JSON.stringify()使用場景內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript腳本語言在網(wǎng)頁中的簡單應(yīng)用
JavaScript腳本語言在網(wǎng)頁中的簡單應(yīng)用...2007-05-05javascript彈出窗口 window.open使用方法以及參數(shù)說明分析篇
window.open是網(wǎng)頁中經(jīng)常遇到的彈出窗口代碼,不是網(wǎng)絡(luò)中比較反感的那類彈出代碼。用于新頁面?zhèn)髦?,回傳等?/div> 2009-12-12javascript 命名規(guī)則 變量命名規(guī)則
匈牙利命名法是一位微軟程序員發(fā)明的,多數(shù)的C,C++程序都使用此命名法。2010-02-02JavaScript 學(xué)習(xí)筆記之操作符(續(xù))
上篇文章我們講解了javascript的操作符中的一元操作符、位操作符、布爾操作符,今天我們繼續(xù)講解剩下的幾個操作符,包括乘性操作符、加性操作符、相等操作符、條件操作符、賦值操作符、逗號操作符,小伙伴們仔細(xì)研讀下吧,對提高自己對于javascript的理解很有幫助。2015-01-01JavaScript函數(shù)節(jié)流和函數(shù)去抖知識點(diǎn)學(xué)習(xí)
這篇文章給大家分享了JavaScript函數(shù)節(jié)流和函數(shù)去抖的相關(guān)的知識點(diǎn)內(nèi)容,有需要的朋友們可以學(xué)習(xí)參考下。2018-07-07最新評論