建站
咨詢
售后
建站咨詢
新聞中心
在開發(fā)中，我們會(huì)經(jīng)常使用 JSON.stringify(object) 來(lái)序列化對(duì)象，但JSON.stringify方法除了了第一個(gè)參數(shù)外，還有其它參數(shù)可用，今天我們一起來(lái)看看這些參數(shù)是做啥的，Let's 開始。
創(chuàng)新互聯(lián)基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)西信服務(wù)器托管報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。
1、 格式化
默認(rèn)的 JSON.stringify(object) 出來(lái)數(shù)據(jù)是一行字符串，這看起來(lái)很丑，如下所示：
const user = {
name: '小智',
age: 30,
isAdmin: true,
friends: ['隔壁老王', '小可愛'],
address: {
city: '天上人間',
},
}
console.log(JSON.stringify(user))
// {"name":"小智","age":30,"isAdmin":true,"friends":["隔壁老王","小可愛"],"address":{"city":"天上人間"}}
JSON.stringify也有一個(gè)內(nèi)置的格式化器!
console.log(JSON.stringify(user, null, 2))
{
"name": "小智",
"age": 30,
"isAdmin": true,
"friends": [
"隔壁老王",
"小可愛"
],
"address": {
"city": "天上人間"
}
}
(如果你想知道這個(gè) null 是什么，我們以后再談)。
在這個(gè)例子中，JSON的格式化有2個(gè)空格的縮進(jìn)。我們還可以指定一個(gè)自定義字符，用于縮進(jìn)。
console.log(JSON.stringify(user, null, '【二哈】'))
{
【二哈】"name": "小智",
【二哈】"age": 30,
【二哈】"isAdmin": true,
【二哈】"friends": [
【二哈】【二哈】"隔壁老王",
【二哈】【二哈】"小可愛"
【二哈】],
【二哈】"address": {
【二哈】【二哈】"city": "天上人間"
【二哈】}
}
2、 在序列化的數(shù)據(jù)中隱藏某些屬性
JSON.stringify 還有一個(gè)很少有人知道的第二個(gè)參，稱為 replacer，是一個(gè)函數(shù)或數(shù)組，決定哪些數(shù)據(jù)要保留在輸出中，哪些不要。
舉例一，假如，我們想隱藏用戶的密碼字段，可以這么做：
const user = {
name: '小智',
password: '12345',
age: 30
};
console.log(JSON.stringify(user, (key, value) => {
if (key === 'password') {
return
}
return value
}))
輸出：
{"name":"小智","age":30}
我們可以進(jìn)一步重構(gòu):
function stripKeys (...keys) {
return (key, value) => {
if (keys.includes(key)) return
return value
}
}
const user = {
name: '小智',
password: '12345',
age: 30,
gender: '未知'
};
console.log(JSON.stringify(user, stripKeys('password', 'gender')))
輸出：
{"name":"小智","age":30}
你也可以傳遞一個(gè)數(shù)組:
const user = {
name: '小智',
password: '12345',
age: 30
}
console.log(JSON.stringify(user, ['name', 'age']))
輸出：
{"name":"小智","age":30}
最酷的是這對(duì)數(shù)組也有效，假設(shè)有如下的數(shù)組：
const poetry = [
{
name: '小智',
content: [
'興盡晚回舟，誤入藕花深處。',
'鬼畜，鬼畜，單身百年手速。',
'起點(diǎn)太高，于是期待太多，奢求太過(guò)，所以永不滿足。',
],
tags: ['經(jīng)典', '魔幻', '鬼才'],
},
{
name: '王大志',
content: [
'君子無(wú)非就是有耐心的狼。',
'信者,無(wú)需誓言,不信者,誓言亦無(wú)助。'
],
tags: ['經(jīng)典', '魔幻', '鬼才'],
},
]
由于詩(shī)太過(guò)美麗，我想出名，最后輸出就想打出輸出關(guān)于名字的字段，那么也可以使用 JSON.stringify 來(lái)做：
console.log(JSON.stringify(poetry, ['name']))
輸出：
[{"name":"小智"},{"name":"王大志"}]
漂亮!
3、 使用 toJSON 來(lái)創(chuàng)建自定義輸出格式
如果一個(gè)對(duì)象實(shí)現(xiàn)了 toJSON 函數(shù)，JSON.stringify 將使用它來(lái)串化數(shù)據(jù)。
考慮一下這個(gè)例子：
class Fraction {
constructor(n, d) {
this.numerator = n;
this.denominator = d;
}
}
console.log(JSON.stringify(new Fraction(1, 2)))
輸出:
{"numerator":1,"denominator":2}
如果我們想讓輸出的結(jié)果是 1/2，那要怎么做呢?實(shí)現(xiàn) toJSON 方法。
class Fraction {
constructor(n, d) {
this.numerator = n;
this.denominator = d;
}
toJSON() {
return `${this.numerator}/${this.denominator}`
}
}
JSON.stringify 根據(jù) toJSON 方法來(lái)解析，所以結(jié)果是 1/2。
4、 恢復(fù)數(shù)據(jù)
繼續(xù)上面的例子，如果我們想再次解析JSON時(shí)，分?jǐn)?shù)會(huì)神奇被還原成原來(lái)的對(duì)象，這是不是很酷?我們可以這樣做：
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 傳遞第二個(gè)參數(shù)來(lái)指定一個(gè) reviver 函數(shù)。reviver 的工作是將字符串化的數(shù)據(jù) "恢復(fù)"到它的原始形式。在這里，我們傳遞了一個(gè)reviver，它是 Fraction 類的靜態(tài)方法 fromJSON。
有趣的是：這個(gè)功能在內(nèi)置的Date對(duì)象中使用。試著查一下 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ù)
與stringify 一樣，parse也可以用來(lái)隱藏?cái)?shù)據(jù)。它們工作方式是一樣的:
const user = JSON.stringify({
name: '小智',
password: '12345',
age: 30,
})
console.log(
JSON.parse(user, (key, value) => {
if (key === 'password') return
return value
})
)
輸出：
{ name: '小智', age: 30 }
你還知不知道其他很酷的JSON技巧呢!
作者：Siddharth 譯者：前端小智
來(lái)源：dev 原文：https://dev.to/siddharhshyniben/5-secret-features-of-jsyou-didnt-know-about-5bbg。
新聞名稱：你不知道的JavaScript中的五個(gè)JSON秘密功能
轉(zhuǎn)載來(lái)源：http://m.fisionsoft.com.cn/article/djgiijj.html
