關於 JavaScript的JSON的一些小技巧
1. 格式化
預設的字串化器還會縮小 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
也有一個內建的格式化程式!
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 個縮排空格。
我們還可以指定用於縮排的自定義字元。
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. 隱藏字串化資料中的某些屬性
JSON.stringify
第二個引數,這在很大程度上是未知的。它被稱為replacer,它是一個函式或陣列,用於決定哪些資料保留在輸出中,哪些不保留。
這是一個簡單的示例,我們可以在其中隱藏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}
我們可以進一步重構:
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}
還可以傳遞一個陣列來僅獲取某些鍵:
const user = {
name: 'John',
password: '12345',
age: 30
}
console.log(JSON.stringify(user, ['name', 'age']))
輸出相同的東西。
這也適用於陣列。如果你有一大堆蛋糕:
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
];
我們可以輕鬆地做同樣的事情,並且替換器將應用於每個蛋糕:
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建立自定義輸出格式
如果一個物件實現了該toJSON函式,JSON.stringify將使用它來對資料進行字串化。
考慮一下:
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呢?
進入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財產和產出"1/2"。
4. 恢復資料
我們上面的分數示例效果很好。但是如果我們想恢復資料呢?當我們再次解析 JSON 時,如果分數能神奇地返回,那不是很酷嗎?我們可以!
進入復活者!
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 }
我們可以傳遞第二個引數JSON.parse來指定 reviver 函式。恢復器的工作是將字串化資料“恢復”回其原始形式。在這裡,我們傳遞了一個 reviver,它是類的靜態fromJSON屬性Fraction。
在這種情況下,reviver 檢查該值是否是一個有效的分數,如果是,它會建立一個新Fraction物件並返回它。
有趣的事實:此功能用於內建的 Date 物件。嘗試查詢Date.prototype.toJSON
這就是為什麼它有效:
console.log(JSON.stringify(new Date()))
//=> '"2022-03-01T06:28:41.308Z"'
要恢復日期,我們可以使用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隱藏資料
與解析器一樣,恢復器也可用於隱藏資料。它以相同的方式工作。
這是一個例子:
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技巧,請暢言。