专栏首页程序员成长指北JSON.stringify() 的 5 个秘密特性

JSON.stringify() 的 5 个秘密特性

前言

关于本文译者:@zoomdong译文:https://juejin.im/post/5e842da76fb9a03c854610c7校对者:@Long Xiong,@niayyy作者:@Prateek Singh原文:https://medium.com/javascript-in-plain-english/5-secret-features-of-json-stringify-c699340f9f27

JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。

作为一名 JavaScript 开发人员,JSON.stringify() 是用于调试的最常见函数。但是它的作用是什么呢,难道我们不能使用 console.log() 来做同样的事情吗?让我们试一试。

//初始化一个 user 对象
 
const user = {
 
 "name" : "Prateek Singh",
 
 "age" : 26
 
}
 


 
console.log(user);
 


 
// 结果
 
// [object Object]
 

哦!console.log() 没有帮助我们打印出期望的结果。它输出 [object Object],因为从对象到字符串的默认转换是 [object Object]。因此,我们使用 JSON.stringify() 首先将对象转换成字符串,然后在控制台中打印,如下所示。

const user = {
 
 "name" : "Prateek Singh",
 
 "age" : 26
 
}
 


 
console.log(JSON.stringify(user));
 


 
// 结果
 
// "{ "name" : "Prateek Singh", "age" : 26 }"
 

一般来说,开发人员使用 stringify 函数的场景较为普遍,就像我们在上面做的那样。但我要告诉你一些隐藏的秘密,这些小秘密会让你开发起来更加轻松。

第二个参数(数组)

是的,stringify 函数也可以有第二个参数。它是要在控制台中打印的对象的键数组。看起来很简单?让我们更深入一点。我们有一个对象 product 并且我们想知道 product 的 name 属性值。当我们将其打印出来:

console.log(JSON.stringify(product));

它会输出下面的结果。

{"id":"0001","type":"donut","name":"Cake","ppu":0.55,"batters":{"batter":[{"id":"1001","type":"Regular"},{"id":"1002","type":"Chocolate"},{"id":"1003","type":"Blueberry"},{"id":"1004","type":"Devil’s Food"}]},"topping":[{"id":"5001","type":"None"},{"id":"5002","type":"Glazed"},{"id":"5005","type":"Sugar"},{"id":"5007","type":"Powdered Sugar"},{"id":"5006","type":"Chocolate with Sprinkles"},{"id":"5003","type":"Chocolate"},{"id":"5004","type":"Maple"}]}

在日志中很难找到 name 键,因为控制台上显示了很多没用的信息。当对象变大时,查找属性的难度增加。stringify 函数的第二个参数这时就有用了。让我们重写代码并查看结果。

console.log(JSON.stringify(product,['name' ]);
 


 
// 结果
 
{"name" : "Cake"}
 

问题解决了,与打印整个 JSON 对象不同,我们可以在第二个参数中将所需的键作为数组传递,从而只打印所需的属性。

第二个参数(函数)

我们还可以传入函数作为第二个参数。它根据函数中写入的逻辑来计算每个键值对。如果返回 undefined,则不会打印键值对。请参考示例以获得更好的理解。

const user = {
 
 "name" : "Prateek Singh",
 
 "age" : 26
 
}
// 结果
 
{ "age" : 26 }
 

只有 age 被打印出来,因为函数判断 typeOf 为 String 的值返回 undefined。

第三个参数为数字

第三个参数控制最后一个字符串的间距。如果参数是一个数字,则字符串化中的每个级别都将缩进这个数量的空格字符。

// 注意:为了达到理解的目的,使用 '--' 替代了空格
 


 
JSON.stringify(user, null, 2);
 
//{
 
//--"name": "Prateek Singh",
 
//--"age": 26,
 
//--"country": "India"
 
//}
 

第三个参数为字符串

如果第三个参数是 string,那么将使用它来代替上面显示的空格字符。

JSON.stringify(user, null,'**');
 
//{
 
//**"name": "Prateek Singh",
 
//**"age": 26,
 
//**"country": "India"
 
//}
 
// 这里 * 取代了空格字符
 

toJSON 方法

我们有一个叫 toJSON 的方法,它可以作为任意对象的属性。JSON.stringify 返回这个函数的结果并对其进行序列化,而不是将整个对象转换为字符串。参考下面的例子。

const user = {
 
 firstName : "Prateek",
 
 lastName : "Singh",
 
 age : 26,
 
 toJSON() {
 
 return { 
 
      fullName: `{this.firstName} + {this.lastName}` 
 };
 
 }
 
}
 


 
console.log(JSON.stringify(user));
 


 
// 结果
 
// "{ "fullName" : "Prateek Singh"}"
 

这里我们可以看到,它只打印 toJSON 函数的结果,而不是打印整个对象。

我希望你能学到 stringify() 的一些基本特征。

本文分享自微信公众号 - 程序员成长指北(coder_growth),作者:zoomdong

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jwt 实践应用以及特殊案例思考

    JSON Web Token 是 rfc7519[1] 出的一份标准,使用 JSON 来传递数据,用于判定用户是否登录状态。

    coder_koala
  • 最好的JavaScript数据可视化库都在这里了

    在 JS 程序中,为了实现漂亮的图形、图表和数据可视化,我们选择使用开源库。生活在数据爆炸的时代,我们开发的每一个应用程序几乎都使用或者借助数据来提升用户体验。...

    coder_koala
  • TS 常见问题整理(60多个,持续更新ing)

    不应该在模块中使用命名空间或者说将命名空间导出: 使用命名空间是为了提供逻辑分组和避免命名冲突,模块文件本身已经是一个逻辑分组,并且它的名字是由导入这个模块的代...

    coder_koala
  • JSON.stringify方法的5个秘密功能

    JSON.stringify()方法将JavaScript对象或值转换为JSON字符串。

    前端知否
  • 并发基石-Markword与锁升级

    synchronized关键字是java提供的互斥锁关键字,我们常说的互斥锁一般都是非自旋锁,即竞争不到锁的线程会进入阻塞状态知道被唤醒 今天我们来讲讲java...

    歪歪梯
  • 90%人都不知道, 有这样一个能让你在链上隐身, 抹掉痕迹的神器 | 干货

    众所周知,以太坊的区块链是公开可见的。也就是说,每当你转移ERC-20通证或任何其他的数字资产时都会在区块链上留下记录,任何第三方都可以轻而易举地监控到这些记录...

    区块链大本营
  • java之hibernate之helloworld

    2.增加一个lib文件夹,并把 hibernate必须的jar包 和 数据库驱动包 一起复制进去

    Vincent-yuan
  • [日常] 20号日常工作总结

    批量删除群发列表 批量删除邮箱地址 (传递以逗号分隔的字符串如 21,22 或者传递一维数组如 id[]=21&id[]=22) (使用array_keys和a...

    陶士涵
  • Hibernate文件配置

    映射需要通过XML的配置文件来完成,这个配置文件尽量统一(xxx.hbm.xml) Hibernate核心的配置:必须的配置、可选的配置、映射文件的引入

    用户3112896
  • JavaScript 浮点数之迷:大数危机

    在 JavaScript 中浮点数运算时经常出现 0.1+0.2=0.30000000000000004 这样的问题,除了这个问题之外还有一个不容忽视的大数危机...

    五月君

扫码关注云+社区

领取腾讯云代金券