专栏首页前端知否JSON.stringify方法的5个秘密功能

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

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

作为JavaScript开发人员,JSON.stringify()是用于调试的最常用功能。但是,这有什么用,难道我们不能单独使用console.log()吗?那就试一把看看。

const user = {
 "name" : "foo bar",
 "age" : 26
}

console.log(user);

结果:
// [object Object]

有些版本的浏览器不会进行格式化打印。最新Chrome打印出来很友好。

糟糕!console.log()不能帮助我们打印所需的结果。它打印[object Object],因为从对象到字符串的默认转换是"[object Object]"。因此,我们使用JSON.stringify()首先将对象转换为字符串,然后像这样在控制台中进行打印。

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

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

// 结果
// "{ "name" : "foo bar", "age" : 26 }"

通常,开发人员像上面一样以简单的方式使用stringify函数。但是我要告诉你一些更简单实用的秘密技巧。

1:第二个参数(数组)

是的,我们的stringify函数也可以有第二个参数。它是您要在控制台中打印的对象的键的数组。看起来简单吗?让我们仔细看看。我们有一个对象产品,我们想知道产品的名称。当我们将其打印为:

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”}]}

由于控制台上显示了大量无用的信息,因此很难在日志中找到名称键。当对象内容变大时,难度增加。

stringify函数的第二个参数就要派上用场了。让我们再次重写代码并查看结果。

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

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

解决了问题,而不是打印整个JSON对象,我们可以通过将所需的键作为数组传递给第二个参数来仅打印所需的键。

2:第二个参数(函数)

我们还可以将第二个参数作为函数传递。它根据函数中编写的逻辑来过滤每个键值对。如果返回undefined,则将不会显示该键值对。示例如下:

const user = {
 "name" : "foo bar",
 "age" : 26
}
// 结果
{ "age" : 26 }

仅打印年龄,因为我们的函数参数,判断条件返回的值typeOf String未定义。

3:第三个参数为Number

第三个参数控制最终字符串中的缩进间距。如果参数是数字,则字符串化的每个层级都将以此数量的空格字符缩进。

// 提示: '--' 表示空格, purposeJSON.stringify(user, null, 2);

//{
//--"name": "foo bar",
//--"age": 26,
//--"country": "China"
//}

4:第三个参数为String

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

JSON.stringify(user, null,'**');

//{
//**"name": "foo bar",
//**"age": 26,
//**"country": "China"
//}
这里的 * 替代了空格

5:toJSON方法

我们有一个名为toJSON的方法,该方法可以作为任何对象的一部分,作为其属性。JSON.stringify返回此函数的结果并将其字符串化,而不是将整个对象转换为字符串。请参阅此示例:

const user = {
 firstName : "foo",
 lastName : "bar",
 age : 26,
 toJSON() {
    return {
       fullName: `${this.firstName} + ${this.lastName}`
    }
}

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

// 结果
// "{ "fullName" : "foo bar"}"

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

本文分享自微信公众号 - 前端知否(qianduanzhifou),作者:QETHAN

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

原始发表时间:2020-02-19

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES10的13个新特性示例

    ES10是与2019年相对应的ECMAScript版本。这个版本中的新功能没有ES6(2015)中的那么多。但是,也不乏一些有用的功能。

    前端知否
  • Vue 2.6尝鲜

    在这篇文章中,将会介绍新版本的新特性, 比如 slots的新语法, Vue.observable()等等

    前端知否
  • Flutter必备语言Dart教程04 - 异步,库

    现在我们来看看如何在Dart中处理异步代码。使用Flutter时,会执行各种操作,例如网络调用和数据库访问,这些操作都应该异步执行。

    前端知否
  • JSON.stringify() 的 5 个秘密特性

    关于本文译者:@zoomdong译文:https://juejin.im/post/5e842da76fb9a03c854610c7校对者:@Long Xion...

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

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

    区块链大本营
  • 并发基石-Markword与锁升级

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

    歪歪梯
  • 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 这样的问题,除了这个问题之外还有一个不容忽视的大数危机...

    五月君

扫码关注云+社区

领取腾讯云代金券