前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JSON.stringify方法的5个秘密功能

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

作者头像
前端知否
发布2020-03-23 18:02:22
7590
发布2020-03-23 18:02:22
举报
文章被收录于专栏:前端知否

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

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

代码语言:javascript
复制
const user = {
 "name" : "foo bar",
 "age" : 26
}

console.log(user);

结果:
// [object Object]

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

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

代码语言:javascript
复制
代码语言:javascript
复制
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));

它给出以下结果:

代码语言:javascript
复制
代码语言:javascript
复制
{“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函数的第二个参数就要派上用场了。让我们再次重写代码并查看结果。

代码语言:javascript
复制
console.log(JSON.stringify(product,['name']);

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

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

2:第二个参数(函数)

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

代码语言:javascript
复制
const user = {
 "name" : "foo bar",
 "age" : 26
}
代码语言:javascript
复制
// 结果
{ "age" : 26 }

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

3:第三个参数为Number

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

代码语言:javascript
复制
// 提示: '--' 表示空格, purposeJSON.stringify(user, null, 2);

//{
//--"name": "foo bar",
//--"age": 26,
//--"country": "China"
//}
4:第三个参数为String

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

代码语言:javascript
复制
JSON.stringify(user, null,'**');

//{
//**"name": "foo bar",
//**"age": 26,
//**"country": "China"
//}
代码语言:javascript
复制
这里的 * 替代了空格
5:toJSON方法

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

代码语言:javascript
复制
const user = {
 firstName : "foo",
 lastName : "bar",
 age : 26,
 toJSON() {
    return {
       fullName: `${this.firstName} + ${this.lastName}`
    }
}

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

// 结果
// "{ "fullName" : "foo bar"}"
代码语言:javascript
复制

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

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1:第二个参数(数组)
  • 2:第二个参数(函数)
  • 3:第三个参数为Number
  • 4:第三个参数为String
  • 5:toJSON方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档