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

栏目: IT技术 · 发布时间: 4年前

内容简介:JSON.stringify()是JavaScript开发人员最常用来调试的函数。但为什么用它呢,难道console.log()不能用来做同样的事情吗?不妨试试看。看!console.log()没有输出我们想要的结果。它输出了[object Object],因为从对象到字符串的默认转换是“[objectObject]”。因此,我们使用JSON.stringify()先将对象转换为字符串,然后把结果输入console控制台,如下所示。

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

JSON.stringify()是JavaScript开发人员最常用来调试的函数。但为什么用它呢,难道console.log()不能用来做同样的事情吗?不妨试试看。

//Initialize a User object 
const user = { 
 “name” : “Prateek Singh”, 
 “age” : 26 
}console.log(user);RESULT 
// [object Object] 

看!console.log()没有输出我们想要的结果。它输出了[object Object],因为从对象到字符串的默认转换是“[objectObject]”。因此,我们使用JSON.stringify()先将对象转换为字符串,然后把结果输入console控制台,如下所示。

const user = { 
“name” : “Prateek Singh”, 
“age” : 26 
}console.log(JSON.stringify(user));RESULT 
// "{ "name" : "Prateek Singh", "age" :26 }" 

通常,开发人员使用这个stringify函数的方式很简单,像上面那样操作就可以。但是接下来所展示的它隐藏的秘密,可以让你的生活变得轻松。

1:第二个参数(数组)

是的,stringify 函数也可以有第二个参数。它是你在控制台中输入对象的键数组。看起来简单吧?接下来仔细看看。我们有一个“产品”对象,并且想知道产品的名称。当我们输入:

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’sFood”}]},”topping”:[{“id”:”5001",”type”:”None”},{“id”:”5002",”type”:”Glazed”},{“id”:”5005",”type”:”Sugar”},{“id”:”5007",”type”:”PowderedSugar”},{“id”:”5006",”type”:”Chocolate withSprinkles”},{“id”:”5003",”type”:”Chocolate”},{“id”:”5004",”type”:”Maple”}]} 

在记录里很难找到名称键,因为在控制台显示了很多无用的信息。当对象变大时,困难也随之增加。

stringify函数的第二个参数派上用场。不妨重写代码,看看结果如何。

console.log(JSON.stringify(product,[‘name’]);//RESULT 
{"name" : "Cake"} 

问题解决了,与输出整个JSON对象不同,我们可以只输出所需的键,通过在第二个参数中将其作为数组来传递。

2:第二个参数(函数)

也可以将第二个参数作为函数来传递。它根据函数中写入的逻辑计算每个键值对。如果返回未定义(undefined)的键值对就不会输出。想要更好地理解,可以参考下面这个例子。

const user = { 
 “name” : “Prateek Singh”, 
 “age” : 26 
} 
 
  
Passing function as 2nd argument 
// Result 
{ "age" : 26 } 

只有age被输出,typeOf字符串的值会因为功能条件返回undefined。

3:第三个参数是数字

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

Note: '--' represnts the spacingfor understanding purposeJSON.stringify(user, null, 2); 
//{ 
//--"name": "Prateek Singh", 
//--"age": 26, 
//--"country": "India" 
//} 

4:第三个参数是字符串

如果第三个参数是字符串,则用它来代替上面显示的空格字符。

JSON.stringify(user, null,'**'); 
//{ 
//**"name": "Prateek Singh", 
//**"age": 26, 
//**"country": "India" 
//} 
Here * replace the space character. 

这里*替代空格字符。

5:toJSON函数

我们有一个名为toJSON的类函数,它的属性是可以作为任何对象的一部分。JSON.stringify返回这个函数的结果并对其进行字符串化,而不是将全部对象转换为字符串。看看下面的例子。

const user = { 
firstName : "Prateek", 
lastName : "Singh", 
age : 26, 
toJSON() { 
   return { 
     fullName: `${this.firstName} +${this.lastName}` 
   };}console.log(JSON.stringify(user));RESULT 
// "{ "fullName" : "Prateek Singh"}" 

可以看到,它不是输出全部对象,而是只有toJSON函数的结果。

希望你能从stringify()身上学到知识。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web程序设计

Web程序设计

塞巴斯塔 / 2008-6 / 68.00元

《Web程序设计(第4版)》是最新版,介绍了Internet和万维网的起源及演变过程,全面系统地讨论了Web开发相关的主要编程语言和工具,以及这些语言和工具之间的相互影响及优劣势。该书对全书内容进行了很多修订,并新增加了关于Ruby、Rails和Ajax的3个章节。一起来看看 《Web程序设计》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具