详解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 相关文章推荐
JavaScript学习历程和心得小结
Aug 16 Javascript
js 处理URL实用技巧
Nov 23 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
javascript中call,apply,bind的区别详解
Dec 11 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
python的多重继承的理解
2017/08/06 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
带薪年假请假条
2014/02/04 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
学校2014年度工作总结
2014/12/06 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
python基础之//、/与%的区别详解
2022/06/10 Python