Jsem si jistý, že jste použili globální JSON objekt pro různé věci, jako jsou požadavky na načtení a vyhnutí se obávanému [object Object] . Vsadím se také, že jste nevěděli o zbytku z velké části neznámých funkcí, které JSON může poskytnout!
JSON můžete dělat skvělé věci, jako je oživení dat, použití vlastního formátu pro kódování/dekódování dat, skrytí určitých vlastností v stringifikovaných datech a formátování vašeho JSON! 🤯
Zní to zajímavě? Pojďme se do toho ponořit!
1. Formátování
Výchozí stringifier také minimalizuje JSON, což vypadá ošklivě
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 má také vestavěný formátovač!
console.log(JSON.stringify(user, null, 2));
// {
// "name": "John",
// "age": 30,
// "isAdmin": true,
// "friends": [
// "Bob",
// "Jane"
// ],
// "address": {
// "city": "New York",
// "country": "USA"
// }
// }
(Pokud vás zajímá, co je to null, přijdeme na to později)
V tomto příkladu byl JSON naformátován se 2 mezerami odsazení.
Můžeme také určit vlastní znak, který se má použít pro odsazení.
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. Skrytí určitých vlastností v stringifikovaných datech
JSON.stringify měl druhý argument, který je z velké části neznámý. Jmenuje se replacer a je to funkce nebo pole, které rozhoduje o tom, která data zachovat ve výstupu a která ne.
Zde je jednoduchý příklad, kde můžeme skrýt password uživatele.
const user = {
name: 'John',
password: '12345',
age: 30
};
console.log(JSON.stringify(user, (key, value) => {
if (key === 'password') {
return;
}
return value;
}));
A toto je výstup:
{"name":"John","age":30}
Můžeme to dále refaktorovat:
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')))
Jaké výstupy:
{"name":"John","age":30}
Můžete také předat pole, abyste získali pouze určité klíče:
const user = {
name: 'John',
password: '12345',
age: 30
}
console.log(JSON.stringify(user, ['name', 'age']))
Které vydávají totéž.
Skvělé je, že to funguje i na polích. Pokud jste měli velké množství dortů:
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
];
Můžeme snadno udělat to samé a náhražka bude aplikována na každý dort:
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']))
Dostáváme toto:
[{"name":"Chocolate Cake"},{"name":"Vanilla Cake"},...]
Skvělé věci!
3. Použití toJSON k vytvoření vlastních výstupních formátů
Pokud objekt implementuje toJSON funkce, JSON.stringify jej použije k stringifikaci dat.
Zvaž toto:
class Fraction {
constructor(n, d) {
this.numerator = n;
this.denominator = d;
}
}
console.log(JSON.stringify(new Fraction(1, 2)))
Výsledkem bude {"numerator":1,"denominator":2} . Ale co kdybychom to chtěli nahradit řetězcem 1/2 ?
Zadejte 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 respektuje toJSON vlastnost a výstup "1/2" .
4. Oživení dat
Náš příklad zlomku výše funguje dobře. Ale co když chceme data oživit? Nebylo by skvělé, kdyby se zlomek magicky vrátil zpět, když znovu analyzujeme JSON? Můžeme!
Zadejte oživovače!
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 }
Můžeme předat druhý argument JSON.parse k určení funkce oživení. Úkolem oživovače je „oživit“ stringovaná data zpět do jejich původní podoby. Zde předáváme oživení, což je statická vlastnost fromJSON z Fraction třída.
V tomto případě reviver zkontroluje, zda je hodnota platným zlomkem, a pokud ano, vytvoří nový Fraction objekt a vrátí jej.
5. Skrytí dat pomocí reviverů
Podobně jako resolvery lze i revivery použít ke skrytí dat. Funguje to stejným způsobem.
Zde je příklad:
const user = JSON.stringify({
name: 'John',
password: '12345',
age: 30
});
console.log(JSON.parse(user, (key, value) => {
if (key === 'password') {
return;
}
return value;
}));
A toto je výstup:
{ name: 'John', age: 30 }
Jako cvičení si ověřte, zda můžete přepsat dříve zobrazené resolvery jako oživovače.
To je zábal!
Dejte mi vědět, pokud znáte nějaké další skvělé JSON triky 👀
Děkujeme za přečtení!