最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

JSON.stringify() 的5个骚操作,你知道几个?

JSON.stringify()方法

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

语法

JSON.stringify(value[, replacer[, space]])

参数说明:

  • value: 必需, 要转换的 JavaScript 值(通常为对象或数组)。
  • replacer:可选。用于转换结果的函数或数组。如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:””。如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
  • space: 可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t。

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

//初始化一个 user 对象
const user = {
 "name" : "mybj123",
 "age" : 3
}
console.log('result:' + user);
// 结果
// result:[object Object]

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

//初始化一个 user 对象
const user = {
 "name" : "mybj123",
 "age" : 3
}
console.log('result:' + JSON.stringify(user));
// 结果
// result:{ "name" : "mybj123", "age" : 3 }

一般来说,前端开发人员使用 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" : "mybj123",
 "age" : 3
}
let jsond = JSON.stringify(user, (key, value) = >{
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
})

console.log('result:' + jsond)

// 结果
{
  "age": 3
}

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

如果第三个参数是数字

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

// 注意:为了达到理解的目的,使用 '--' 替代了空格
JSON.stringify(user, null, 2);

//{
//--"name": "mybj123",
//--"age": 3,
//--"country": "china"
//}

如果第三个参数是字符串

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

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

//{
//**"name": "mybj123",
//**"age": 3,
//**"country": "china"
//}
// 这里 * 取代了空格字符

toJSON 方法

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

const user = {
 firstName : "mybj",
 lastName : "123",
 age : 3,
 toJSON() {
    return { 
      fullName: `${this.firstName} + ${this.lastName}`
    };
 }
}

console.log(JSON.stringify(user));
// 结果
// "{ "fullName" : "mybj 123"}"

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

结语

以上就是码云笔记今天为大家整理的关于JSON.stringify() 的5个骚操作方法,希望对你有用。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » JSON.stringify() 的5个骚操作,你知道几个?

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发