關(guān)于JavaScript中JSON的5個小技巧分享
1. 格式化
默認(rèn)的字符串化器還會縮小 JSON,看起來很難看
const user = { name: 'John', age: 30, isAdmin: true, friends: ['Bob', 'Jane'], address: { city: 'New York', country: 'USA' } }; console.log(JSON.stringify(user)); //=> {"name":"John","age":30,"isAdmin":true,"friends":["Bob","Jane"],"address":{"city":"New York","country":"USA"}}
JSON.stringify
也有一個內(nèi)置的格式化程序!
console.log(JSON.stringify(user, null, 2)); // { // "name": "John", // "age": 30, // "isAdmin": true, // "friends": [ // "Bob", // "Jane" // ], // "address": { // "city": "New York", // "country": "USA" // } // }
(如果你想知道那個 null 是什么,我們稍后會談到)
在此示例中,JSON 格式為 2 個縮進(jìn)空格。
我們還可以指定用于縮進(jìn)的自定義字符。
console.log(JSON.stringify(user, null, 'lol')); // { // lol"name": "John", // lol"age": 30, // lol"isAdmin": true, // lol"friends": [ // lollol"Bob", // lollol"Jane" // lol], // lol"address": { // lollol"city": "New York", // lollol"country": "USA" // lol} // }
2. 隱藏字符串化數(shù)據(jù)中的某些屬性
JSON.stringify
第二個參數(shù),這在很大程度上是未知的。它被稱為replacer,它是一個函數(shù)或數(shù)組,用于決定哪些數(shù)據(jù)保留在輸出中,哪些不保留。
這是一個簡單的示例,我們可以在其中隱藏password用戶。
const user = { name: 'John', password: '12345', age: 30 }; console.log(JSON.stringify(user, (key, value) => { if (key === 'password') { return; } return value; }));
這是輸出:
{"name":"John","age":30}
我們可以進(jìn)一步重構(gòu):
function stripKeys(...keys) { return (key, value) => { if (keys.includes(key)) { return; } return value; }; } const user = { name: 'John', password: '12345', age: 30, gender: 'male' }; console.log(JSON.stringify(user, stripKeys('password', 'gender')))
輸出:
{"name":"John","age":30}
還可以傳遞一個數(shù)組來僅獲取某些鍵:
const user = { name: 'John', password: '12345', age: 30 } console.log(JSON.stringify(user, ['name', 'age']))
輸出相同的東西。
這也適用于數(shù)組。如果你有一大堆蛋糕:
const cakes = [ { name: 'Chocolate Cake', recipe: [ 'Mix flour, sugar, cocoa powder, baking powder, eggs, vanilla, and butter', 'Mix in milk', 'Bake at 350 degrees for 1 hour', // ... ], ingredients: ['flour', 'sugar', 'cocoa powder', 'baking powder', 'eggs', 'vanilla', 'butter'] }, // tons of these ];
我們可以輕松地做同樣的事情,并且替換器將應(yīng)用于每個蛋糕:
const cakes = [ { name: 'Chocolate Cake', recipe: [ 'Mix flour, sugar, cocoa powder, baking powder, eggs, vanilla, and butter', 'Mix in milk', 'Bake at 350 degrees for 1 hour', // ... ], ingredients: ['flour', 'sugar', 'cocoa powder', 'baking powder', 'eggs', 'vanilla', 'butter'] }, // tons of these ]; console.log(JSON.stringify(cakes, ['name']))
我們得到這個:
[{"name":"Chocolate Cake"},{"name":"Vanilla Cake"},...]
3.使用toJSON創(chuàng)建自定義輸出格式
如果一個對象實(shí)現(xiàn)了該toJSON函數(shù),JSON.stringify將使用它來對數(shù)據(jù)進(jìn)行字符串化。
考慮一下:
class Fraction { constructor(n, d) { this.numerator = n; this.denominator = d; } } console.log(JSON.stringify(new Fraction(1, 2)))
這將輸出{"numerator":1,"denominator":2}. 但是如果我們想用一個字符串替換它1/2呢?
進(jìn)入toJSON
class Fraction { constructor(n, d) { this.numerator = n; this.denominator = d; } toJSON() { return `${this.numerator}/${this.denominator}` } } console.log(JSON.stringify(new Fraction(1, 2)))
JSON.stringify尊重toJSON財(cái)產(chǎn)和產(chǎn)出"1/2"。
4. 恢復(fù)數(shù)據(jù)
我們上面的分?jǐn)?shù)示例效果很好。但是如果我們想恢復(fù)數(shù)據(jù)呢?當(dāng)我們再次解析 JSON 時,如果分?jǐn)?shù)能神奇地返回,那不是很酷嗎?我們可以!
進(jìn)入復(fù)活者!
class Fraction { constructor(n, d) { this.numerator = n; this.denominator = d; } toJSON() { return `${this.numerator}/${this.denominator}` } static fromJSON(key, value) { if (typeof value === 'string') { const parts = value.split('/').map(Number); if (parts.length === 2) return new Fraction(parts); } return value; } } const fraction = new Fraction(1, 2); const stringified = JSON.stringify(fraction); console.log(stringified); // "1/2" const revived = JSON.parse(stringified, Fraction.fromJSON); console.log(revived); // Fraction { numerator: 1, denominator: 2 }
我們可以傳遞第二個參數(shù)JSON.parse來指定 reviver 函數(shù)?;謴?fù)器的工作是將字符串化數(shù)據(jù)“恢復(fù)”回其原始形式。在這里,我們傳遞了一個 reviver,它是類的靜態(tài)fromJSON屬性Fraction。
在這種情況下,reviver 檢查該值是否是一個有效的分?jǐn)?shù),如果是,它會創(chuàng)建一個新Fraction對象并返回它。
有趣的事實(shí):此功能用于內(nèi)置的 Date 對象。嘗試查找Date.prototype.toJSON
這就是為什么它有效:
console.log(JSON.stringify(new Date())) //=> '"2022-03-01T06:28:41.308Z"'
要恢復(fù)日期,我們可以使用JSON.parse:
function reviveDate(key, value) { const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,}|)Z$/; if (typeof value === "string" && regex.test(value)) { return new Date(value); } return value; } console.log(JSON.parse('"2022-03-01T06:28:41.308Z"', reviveDate)) //=> Tue Mar 01 2022 06:28:41 GMT-0700 (Pacific Daylight Time)
5.使用revivers隱藏?cái)?shù)據(jù)
與解析器一樣,恢復(fù)器也可用于隱藏?cái)?shù)據(jù)。它以相同的方式工作。
這是一個例子:
const user = JSON.stringify({ name: 'John', password: '12345', age: 30 }); console.log(JSON.parse(user, (key, value) => { if (key === 'password') { return; } return value; }));
這是輸出:
{ name: 'John', age: 30 }
如果你還知道任何其他很酷的JSON技巧,請暢言。
到此這篇關(guān)于關(guān)于JavaScript中JSON的5個小技巧分享的文章就介紹到這了,更多相關(guān)JavaScript JSON技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)Tab欄切換的兩種方式案例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)Tab欄切換的兩種方式,一種是面向過程的寫法,一種是面向?qū)ο蟮膶懛?,本文給大家分享詳細(xì)案例代碼,需要的朋友可以參考下2022-08-08Javascript 兩個窗體之間傳值實(shí)現(xiàn)代碼
眾所周知window.open() 函數(shù)可以用來打開一個新窗口,那么如何在子窗體中向父窗體傳值呢,其實(shí)通過window.opener即可獲取父窗體的引用。2009-09-09ES6 系列之 Generator 的自動執(zhí)行的方法示例
這篇文章主要介紹了ES6 系列之 Generator 的自動執(zhí)行的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10JavaScript實(shí)現(xiàn)的圖片3D展示空間(3DRoom)
一般的平面效果,通過改變水平和垂直坐標(biāo)就能實(shí)現(xiàn),再加上深度,就能在視覺上的產(chǎn)生3D(三維)的效果。2010-10-10