一名 JavaScript 开发人员,JSON.stringify() 应该是我们经常用于调试的最常见函数。它的作用是什么呢,难道我们不能使用 console.log() 来做同样的事情吗?让我们试一试。
首字母缩略词 Json 在木板上
//初始化一个 user 对象const user = { "name" : "Zhangsan", "age" : 22}console.log(user);// 打印结果:[object Object]
很明显,我们打印的是一个对象,不能显示出来我们想要的结果。如果通过某种方式打印出来字符串呢?我们就需要使用 JSON.stringify() 首先将对象转换成字符串,然后在控制台中打印,如下所示。
const user = { "name" : "Zhangsan", "age" : 22}console.log(JSON.stringify(user));// 结果 "{ "name" : "Zhangsan", "age" : 22 }"
我们知道,结果出来了。其实平时,我们使用 stringify 函数的场景是较为普遍的,就像我们在上面做的那样。但我要告诉你一些隐藏的秘密,这些小秘密会让你开发起来更加轻松。
1: 第二个参数(数组)
是的,stringify 函数也可以有第二个参数。它是要在控制台中打印的对象的键数组。看起来很简单?让我们更深入一点。我们有一个对象 user 并且我们想知道 user 的 name 属性值。当我们将其打印出来: console.log(JSON.stringify(user)); 它会输出下面的结果。
{"id":1,"name":"Lucy",age:12,sex:"女"}
在日志中我们只想看到打印name,那我们该怎么做呢?当然,我们可以直接使用console.log(user.name),但是我们还可以使用这种方式,如下:
console.log(JSON.stringify(user,['name' ]);// 结果{"name" : "Lucy"}
2: 第二个参数(函数)
我们还可以传入函数作为第二个参数。如下,如果返回 undefined,则不会打印键值对。
const user = { "name" : "Lisi", "age" : 33}
实现方式:
console.log(JSON.stringify(user,(key,value)=>{if(typeof value == 'string'){ return undefined } return value});
这样就可以实现过滤了,满足条件的才可以打印出来结果。
3: 第三个参数为数字
如果第三个参数是一个数字,则字符串化中的每个级别都将缩进这个数量的空格字符。
JSON.stringify(user, null, 2);//打印,可以看到name和age前面有两个空格的缩进//{// "name": "Lisi",// "age": 33,//}
4: 第三个参数为字符串
如果第三个参数是 string,那么将使用它来代替上面显示的空格字符。
JSON.stringify(user, null,'**');//{//**"name": "Lisi",//**"age": 33,//}// 这里 * 取代了空格字符,
当然打印,我们也可以借助我们的console本身来实现。
console.log('',user);//打印 是一样的。//{// "name": "Lisi",// "age": 33,//}console.log('',user.name);//打印//Lisi
总结
其实JSON.stringify是我们经常使用的知识,我们在这里主要是为了对JSON.stringify函数进行介绍和学习,让大家对其有更加深刻的印象。希望对我们有多的帮助。