你不知道的JavaScript中的五个JSON秘密功能

开发 前端
在开发中,我们会经常使用 JSON.stringify(object) 来序列化对象,但JSON.stringify方法除了了第一个参数外,还有其它参数可用,今天我们一起来看看这些参数是做啥的,Let's 开始。

在开发中,我们会经常使用 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}`
}
}

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 }

你还知不知道其他很酷的JSON技巧呢!

作者:Siddharth 译者:前端小智

来源:dev 原文:https://dev.to/siddharhshyniben/5-secret-features-of-jsyou-didnt-know-about-5bbg。

责任编辑:姜华 来源: 大迁世界
相关推荐

2010-08-23 09:56:09

Java性能监控

2022-10-13 11:48:37

Web共享机制操作系统

2023-07-07 14:47:46

JavaScript技巧

2021-12-22 09:08:39

JSON.stringJavaScript字符串

2011-07-11 15:52:47

RCWindows

2022-10-27 21:01:03

JavaScrip面试题开发

2011-05-29 17:04:10

笔记本体验

2024-04-19 16:58:17

人工智能AI机器人

2022-04-30 19:22:35

Python编程语言

2011-09-06 13:56:07

Vista服务器网卡

2020-06-22 08:09:22

GitHub工具开发

2009-09-04 11:06:06

Linux桌面Linux操作系统linux

2020-11-03 09:51:04

JavaScript开发 技巧

2017-11-07 21:58:25

前端JavaScript调试技巧

2020-07-28 08:26:34

WebSocket浏览器

2020-06-12 09:20:33

前端Blob字符串

2018-04-04 12:05:04

Postgre数据planner

2024-05-15 18:59:01

JavaScript语言原型

2021-01-28 10:04:40

JavaScript开发技术

2018-02-07 08:21:42

点赞
收藏

51CTO技术栈公众号