详解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之自动完成组件的深入解析
Jun 19 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
js跳转页面方法总结
Jan 29 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 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
php 获取mysql数据库信息代码
2009/03/12 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
详解vue路由
2020/08/05 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
PyQt5 界面显示无响应的实现
2020/03/26 Python
python如何设置静态变量
2020/09/07 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
介绍一下#error预处理
2015/09/25 面试题
SQL Server面试题
2016/10/17 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
驾驶员培训方案
2014/05/01 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python