详解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 UI Dialog的样式设置问题
Dec 18 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
js弹出对话框方式小结
Nov 17 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python网络编程详解
2017/10/31 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
护士专业推荐信
2013/11/02 职场文书
趣味活动策划方案
2014/02/08 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers