你不知道的冷知识:JSON.stringify 居然还能这样用?

Posted 前端真好玩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了你不知道的冷知识:JSON.stringify 居然还能这样用?相关的知识,希望对你有一定的参考价值。

点击 蓝字前端真好玩 关注,回复“ 1 ”加入前端进阶群 与大家一起成长


JSON.stringify() 这个 API 想必大家都用过,可以帮助我们将数据解析成字符串类型,如下是个例子:

const obj = {
name: 'foo',
level: 'low',
age: '100',
money: 'empty'
}
JSON.stringify(obj)
// "{"name":"foo","level":"low","age":"100","money":"empty"}"

想必这样的写法大家都知道,但是其实 JSON.stringify 总共接受三个参数。

第二个参数可以传入一个数组或者函数。

我们先来看看传入数组的话结果会是什么?

JSON.stringify(obj, ['name', 'age'])
// "{"name":"foo","age":"100"}"

当我们传入数组时候,只有数组内的属性名才会被正常序列化。

那么当第二个参数传入函数会发生什么呢?

const obj1 = { name: new Set([1]) }
JSON.stringify(obj1, (key, value) => {
return value instanceof Set ? [...value] : value
})
// 正常序列化是 "{"name":{}}"
// 例子中的输出为 "{"name":[1]}"

我们都知道 JSON.stringify 是不能处理某些值的,就比如例子中的 Set 类型的值就不能正常序列化。但是其实我们可以通过传入函数的方式帮助我们将 Set 类型的值转换为数组类型,从而使得数据能够被正常序列化。

第三个参数可以传入数字或者字符串类型,该参数用于美化输出。正常来说输出的结果都是一行文本,在数据量小的时候阅读起来没啥压力,但是当数据量庞大的时候就会增加阅读难度。这个参数在这种时候就能帮助到我们。

JSON.stringify(obj, null, 2)
// "{
// "name": "foo",
// "level": "low",
// "age": "100",
// "money": "empty"
// }"

当传入数字时,每个属性都会换行并且带有缩进空格。

JSON.stringify(obj, null, '

以上是关于你不知道的冷知识:JSON.stringify 居然还能这样用?的主要内容,如果未能解决你的问题,请参考以下文章

你不知道的JSON.stringify和JSON.parse

JavaScript中你不知道的5个JSON-使用技巧

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

CSS3你可能不知道的冷知识

你根本不知道的冷知识,看完我惊呆了,原来.....

Java 15 年老兵都不一定了解的冷知识!