前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >你不知道的冷知识:JSON.stringify 居然还能这样用?

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

作者头像
前端达人
发布2019-11-25 13:02:56
3330
发布2019-11-25 13:02:56
举报
文章被收录于专栏:前端达人前端达人

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

代码语言:javascript
复制
const obj = {
  name: 'foo',
  level: 'low',
  age: '100',
  money: 'empty'
}
JSON.stringify(obj)
// "{"name":"foo","level":"low","age":"100","money":"empty"}"

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

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

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

代码语言:javascript
复制
JSON.stringify(obj, ['name', 'age'])
// "{"name":"foo","age":"100"}"

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

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

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

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

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

代码语言:javascript
复制
JSON.stringify(obj, null, 2)
// "{
//   "name": "foo",
//   "level": "low",
//   "age": "100",
//   "money": "empty"
// }"

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

代码语言:javascript
复制
JSON.stringify(obj, null, '?')
// "{
// ?"name": "foo",
// ?"level": "low",
// ?"age": "100",
// ?"money": "empty"
//}"

当传入字符串时,每个属性照样都会换行并且在开头加上你传入的字符串。

以上就是本篇文章的内容了,虽然这单纯属于 API 范畴的知识,但是我相信很多人应该并不知道 JSON.stringify 还拥有这样的能力。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-11-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档