JS?JSON.stringify()的5個使用場景詳解
前言
JSON.stringify() 方法將一個 JavaScript 對象或值轉換為 JSON 字符串,如果指定了一個 replacer 函數(shù),則可以選擇性地替換值,或者指定的 replacer 是數(shù)組,則可選擇性地僅包含數(shù)組指定的屬性。
語法如下:
JSON.stringify(value[, replacer [, space]])
- 第一個參數(shù)
value:將要序列化成 一個 JSON 字符串的值。 - 第二個參數(shù)
replacer:可選參數(shù),如果該參數(shù)是一個函數(shù),則在序列化過程中,被序列化的值的每個屬性都會經過該函數(shù)的轉換和處理;如果該參數(shù)是一個數(shù)組,則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中;如果該參數(shù)為null或者未提供,則對象所有的屬性都會被序列化。 - 第三個參數(shù)
space:可選參數(shù),指定縮進用的空白字符串,用于美化輸出(pretty-print);如果參數(shù)是個數(shù)字,它代表有多少的空格;上限為10。該值若小于1,則意味著沒有空格;如果該參數(shù)為字符串(當字符串長度超過 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ù)傳遞,根據函數(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ù)據的屬性值。
第三個參數(shù)為 Number
第三個參數(shù)控制最終字符串中的間距。如果參數(shù)是一個數(shù)字,則字符串化中的每個級別都將縮進此數(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ù)的結果并將其字符串化,而不是將整個對象轉換為字符串。
//Initialize a User object
const user = {
name: "DevPoint",
city: "Shenzhen",
toJSON() {
return `姓名:${this.name},所在城市:${this.city}`;
},
};
console.log(JSON.stringify(user)); // "姓名:DevPoint,所在城市:Shenzhen"總結
到此這篇關于JS JSON.stringify()使用場景詳解的文章就介紹到這了,更多相關JSON.stringify()使用場景內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
全面了解JavaScirpt 的垃圾(garbage collection)回收機制
下面小編就為大家?guī)硪黄媪私釰avaScirpt 的垃圾(garbage collection)回收機制。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
頁面get請求 中文參數(shù)方法亂碼問題的快速解決方法
下面小編就為大家?guī)硪黄撁鎔et請求 中文參數(shù)方法亂碼問題的快速解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
解析JavaScript面向對象概念中的Object類型與作用域
這篇文章主要介紹了解析JavaScript面向對象概念中的引用類型與作用域,文中重點講解了擴充函數(shù)運行作用域的需要的call和apply方法,朋友可以參考下2016-05-05
JavaScript中require和import的區(qū)別詳解
本文詳細講解了JS中require和import的區(qū)別,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
js中escape對應的C#解碼函數(shù) UrlDecode
js中escape對應的C#解碼函數(shù) System.Web.HttpUtility.UrlDecode(s),使用過程中有以下幾點需要注意2012-12-12
THREE.JS入門教程(4)創(chuàng)建粒子系統(tǒng)
Three.js是一個偉大的開源WebGL庫,WebGL允許JavaScript操作GPU,在瀏覽器端實現(xiàn)真正意義的3D本文將介紹創(chuàng)建一個粒子系統(tǒng)/風格/引入物理等等,感興趣的朋友可以了解下哦,希望本文對你有所幫助2013-01-01

