您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JSON.stringify如何運用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“JSON.stringify如何運用”吧!
JSON.stringify(value[, replacer [, space]])
replacer 參數(shù)可以是一個函數(shù)或者一個數(shù)組。作為函數(shù),它有兩個參數(shù),鍵(key)和值(value),它們都會被序列化。
值得注意的是,在開始時, replacer 函數(shù)會被傳入一個空字符串作為 key 值,value代表著要被 stringify 的這個對象。隨后每個對象或數(shù)組上的屬性會被依次傳入。
總的來說 replacer 參數(shù)就是用來手動忽略一些不想被序列化的屬性,有點類似過濾器的作用
var foo = { id: 1, name: "sf", age: 18, }; //作為函數(shù),函數(shù)沒有返回值或者返回值為 undefined 時,忽略這個屬性值 JSON.stringify(foo, (key, value) => { if (typeof value === "string") { return undefined; } return value; }); //{"id":1,"age":18} //作為數(shù)組,數(shù)組的值代表將被序列化成 JSON 字符串的屬性名 JSON.stringify(foo, ['id',"name"]); //{"id":1,"name":"sf"}
space 參數(shù)用來控制結(jié)果字符串里面的間距。如果是一個數(shù)字, 則在字符串化時每一級別會比上一級別縮進多這個數(shù)字值的空格(最多10個空格);如果是一個字符串,則每一級別會比上一級別多縮進該字符串(或該字符串的前10個字符)。實際使用基本都是用來美化輸出。
let a = JSON.stringify({ a: 1, b: 2 }, null, 2); let b = JSON.stringify({ a: 1, b: 2 }, null, " "); console.log(a == b); //true JSON.stringify({ a: 1, b: 2 }, null, "--"); // { // --"a": 1, // --"b": 2 // }
出現(xiàn)在對象屬性值中: undefined、Symbol值、函數(shù),在序列化過程中將會被忽略
出現(xiàn)在數(shù)組中: undefined、Symbol值、函數(shù) 會被轉(zhuǎn)化為 null
單獨轉(zhuǎn)換時: 會返回 undefined
const obj = { a: "a", b: undefined, c: Symbol(), d: function () {}, }; JSON.stringify(obj) // {"a":"a"} const arry = [undefined, Symbol("c"), function () {}]; JSON.stringify(arry); //[null,null,null] JSON.stringify(undefined); // undefined JSON.stringify(Symbol(111)); // undefined JSON.stringify(function () {}); // undefined
正如在第一特性所說,JSON.stringify() 序列化時會忽略一些特殊的值,所以不能保證序列化后的字符串還是以特定的順序出現(xiàn)(數(shù)組除外)。
JSON.stringify([new Boolean(true), new Number(1), new String("a")]); // [true,1,"a"]
const obj = { a: "aaa", toJSON() { return "hello world"; }, }; JSON.stringify(obj); // "hello world"
const obj = { name: "loopObj", }; const loopObj = { obj, }; // 對象之間形成循環(huán)引用,形成閉環(huán) obj.loopObj = loopObj; JSON.stringify(obj); //TypeError: Converting circular structure to JSON
. 對包含循環(huán)引用的對象(對象之間相互引用,形成無限循環(huán))執(zhí)行此方法,會拋出錯誤。
const obj = { a: "aaa", [Symbol("foo")]: "foo", }; JSON.stringify(obj); // {"a":"aaa"} JSON.stringify(obj, function (k, v) { if (typeof k === "symbol") { return "a symbol"; } }); // undefined
JSON.stringify({ date: new Date("2022-02-02"), }) // {"date":"2022-02-02T00:00:00.000Z"}
JSON.stringify([NaN, Infinity, 1 / 0, Number("a")]); // [null,null,null,null]
// 不可枚舉的屬性默認會被忽略: JSON.stringify( Object.create(null, { x: { value: "x", enumerable: false }, y: { value: "y", enumerable: true }, }) ); // "{"y":"y"}"
localStorage 中的鍵值對總是以字符串的形式存儲,所以當(dāng)我們需要把一個對象存在 localStorage 中時,只能用 JSON.stringify 將其轉(zhuǎn)化成字符串存儲,使用的時候用 JSON.parse 方法去取
const userInfo = { user: "admin" }; localStorage.setItem("userInfo", JSON.stringify(userInfo)); JSON.parse(localStorage.getItem("userInfo")); // {user: 'admin'}
使用 JSON.parse(JSON.stringify) 是實現(xiàn)對象的深拷貝最簡單粗暴的方法。但是由于 JSON.stringify 的一些特性,會產(chǎn)生問題,例如:
undefined、Symbol、 函數(shù), 對象中會被忽略,數(shù)組中會被序列化成 null。
NaN、Infinity 和 -Infinity 會被序列化成 null。
循環(huán)引用問題,stringify 會報錯。
當(dāng)確定不存在以上情況時,才考慮使用 JSON.parse(JSON.stringify) 進行深拷貝。
當(dāng)接口返回一大堆數(shù)據(jù),我們只想存某幾個屬性的時候,通過 replacer 函數(shù)過濾屬性是一個不錯的小技巧。
var foo = { id: 1, name: "sf", age: 18, }; localStorage.setItem("user", JSON.stringify(foo, ["id", "name"])); localStorage.getItem("user"); //{"id":1,"name":"sf"}
到此,相信大家對“JSON.stringify如何運用”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。