你不知道的5个JavaScript中JSON的秘密功能分享
作者:前端小智
在开发中,我们会经常使用 JSON.stringify(object)
来序列化对象,但JSON.stringify
方法除了了第一个参数外,还有其它参数可用,今天我们一起来看看这些参数是做啥的,Let's 开始。
1.格式化
默认的 JSON.stringify(object) 出来数据是一行字符串,这看起来很丑,如下所示:
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
也有一个内置的格式化器!
console.log(JSON.stringify(user, null, 2)) { "name": "小智", "age": 30, "isAdmin": true, "friends": [ "隔壁老王", "小可爱" ], "address": { "city": "天上人间" } }
(如果你想知道这个 null
是什么,我们以后再谈)。
在这个例子中,JSON的格式化有2个空格的缩进。我们还可以指定一个自定义字符,用于缩进。
console.log(JSON.stringify(user, null, '【二哈】')) { 【二哈】"name": "小智", 【二哈】"age": 30, 【二哈】"isAdmin": true, 【二哈】"friends": [ 【二哈】【二哈】"隔壁老王", 【二哈】【二哈】"小可爱" 【二哈】], 【二哈】"address": { 【二哈】【二哈】"city": "天上人间" 【二哈】} }
2.在序列化的数据中隐藏某些属性
JSON.stringify
还有一个很少有人知道的第二个参,称为 replacer
,是一个函数或数组,决定哪些数据要保留在输出中,哪些不要。
举例一,假如,我们想隐藏用户的密码字段,可以这么做:
const user = { name: '小智', password: '12345', age: 30 }; console.log(JSON.stringify(user, (key, value) => { if (key === 'password') { return } return value }))
输出:
{"name":"小智","age":30}
我们可以进一步重构:
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}
你也可以传递一个数组:
const user = { name: '小智', password: '12345', age: 30 } console.log(JSON.stringify(user, ['name', 'age']))
输出:
{"name":"小智","age":30}
最酷的是这对数组也有效,假设有如下的数组:
const poetry = [ { name: '小智', content: [ '兴尽晚回舟,误入藕花深处。', '鬼畜,鬼畜,单身百年手速。', '起点太高,于是期待太多,奢求太过,所以永不满足。', ], tags: ['经典', '魔幻', '鬼才'], }, { name: '王大志', content: [ '君子无非就是有耐心的狼。', '信者,无需誓言,不信者,誓言亦无助。' ], tags: ['经典', '魔幻', '鬼才'], }, ]
由于诗太过美丽,我想出名,最后输出就想打出输出关于名字的字段,那么也可以使用 JSON.stringify
来做:
console.log(JSON.stringify(poetry, ['name']))
输出:
[{"name":"小智"},{"name":"王大志"}]
漂亮!
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
的工作是将字符串化的数据 "恢复"到它的原始形式。在这里,我们传递了一个reviver
,它是 Fraction
类的静态方法 fromJSON
。
有趣的是:这个功能在内置的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 隐藏数据
与stringify
一样,parse
也可以用来隐藏数据。它们工作方式是一样的:
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 }
以上就是你不知道的5个JavaScript中JSON的秘密功能分享的详细内容,更多关于JavaScript JSON的资料请关注脚本之家其它相关文章!