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


Posted in Javascript onMay 26, 2020

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 
 }

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

// 结果 
  { "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() 的一些基本特征。

到此这篇关于详解JSON.stringify()的5个秘密特性的文章就介绍到这了,更多相关JSON.stringify()特性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
微信小程序实现简单文字跑马灯
May 26 #Javascript
微信小程序实现带放大效果的轮播图
May 26 #Javascript
vue实现图片上传功能
May 28 #Javascript
小程序实现图片移动缩放效果
May 26 #Javascript
jQuery实现的分页插件完整示例
May 26 #jQuery
js实现时间日期校验
May 26 #Javascript
Node.js API详解之 assert模块用法实例分析
May 26 #Javascript
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jquery foreach使用示例
2013/09/12 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js性能优化技巧
2015/11/29 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
pycharm远程开发项目的实现步骤
2019/01/20 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
为什么会有内存对齐
2016/10/10 面试题
大学生饮食配送创业计划书
2014/01/04 职场文书
服务行业演讲稿
2014/09/02 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang