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

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
 }

// 结果 
  { "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()特性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

    "JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使JSON成为理想的数据交换语言,作用是易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)." 今天在这里笔者想简单谈谈jquery里面的JSON.parse()和JSON.stringify()函数,顺便还会提一下原生JS里面的eval()函数 (1)JSO

  • 打印json对象的内容及JSON.stringify函数应用

    在调试的时候,经常需要知道json对象的内容,通过JSON.stringify函数,可以转换json对象为字符串. 复制代码 代码如下: $(document).ready(function() { $.ajax({ type: "post", dataType: "json", url: '/centermanage/modules/admin/index.php?task=getequipmentinfo', data: "&id="

  • JSON.stringify转换JSON时日期时间不准确的解决方法

    JSON.stringify转换JSON时日期时间不准确的解决方法

    调用JSON.stringify将对象转为对应的字符串时,如果包含时间对象,时间对象会被转换为国家标准时间(ISO),而不是当前国家区域的时间,测试代码如下: 复制代码 代码如下: <script>     //var o = new Date();     //console.log(o.toString())//中国时区时间,格式如"Wed Jun 11 2014 10:51:42 GMT+0800"     //console.log(JSON.stringify(o

  • js JSON.stringify()基础详解

    JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如果指定了replacer是一个函数,则可以选择性的替换值,或者如果指定了replacer是一个数组,可选择性的仅包含数组指定的属性. 语法 JSON.stringify(value[, replacer [, space]]) 参数 value 将要序列化成 一个JSON 字符串的值. replacer 可选 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函

  • JSON.stringify 语法实例讲解

    JSON.stringify 语法实例讲解

    认识javascript也不短的时间了,可是这个用法说实在的,我还是第一次见过,惭愧啊惭愧啊.于是乎,在网上找了写资料,写了些例子 希望能给园子们一些帮助. 作用:这个函数的作用主要是为了系列化对象的. 可能有些人对系列化这个词过敏,我的理解很简单.就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的).就这么简单.打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的.很简单吧. 接着看. 语法: JSON.stringify(value [, repla

  • 解决JSON.stringify()自动将中文转译成unicode的问题

    最近在工作中,发现在IE8下JSON.stringify()自动将中文转译为unicode编码,原本选择的中文字符,传到后台变为了unicode编码,即\u****的形式.查找资料后发现,与标准的JSON.stringify()不同,IE8内置的JSON.stringify()会自动将编码从utf-8转为unicode编码,导致出现这种类似于乱码的情况. 解决方法分为两种,第一种是后台接收到数据之后,将该数据再进行一次转码,重新转为utf-8,然后再保存到数据库中,这样,再次从数据库取出传给前端

  • 浅谈JSON.parse()和JSON.stringify()

    1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23"}' 经 JSON.parse(str) 得到: Object: age:"23" name:"cpf" _proto_:Object ps:单引号写在{}外,每个属性都必须双引号,否则会抛出异常 2.stringify用于从一个对象解析出字符串,例如 var

  • 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com","text":"test","orgId":123,"dataType":"curry","activeClass":"haha"}]'; JSON.parse(str); 结果

  • JSON.parse()和JSON.stringify()使用介绍

    parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' 结果: JSON.parse(str) Object age: "23" name: "huangxiaojian" __proto__: Object 注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常. stringify(

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

    JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串. 作为一名 JavaScript 开发人员,JSON.stringify() 是用于调试的最常见函数.但是它的作用是什么呢,难道我们不能使用 console.log() 来做同样的事情吗?让我们试一试. //初始化一个 user 对象 const user = { "name" : "Prateek Singh", "age" : 26 }

  • 详解JSON.parse和JSON.stringify用法

    JSON格式,(简写JavaScript Object Notation),是一种用于数据交换的文本格式,书写简单.基于JavaScript原生语法,能够序列化对象.数组.数值.字符串.布尔值和 null. 在ES5中,增加了一个JSON对象,专门用来处理JSON格式的数据.JSON是一个对象,但只有两个方法:parse 和 stringify,不能作为构造函数,也无属性. typeof JSON === 'object' JSON.parse JSON.parse() 用来解析JSON字符串,

  • 实例详解JSON取值(key是中文或者数字)方式

    JSON取值(key是中文或者数字)方式详解 先准备一个json对象用于演示 var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'}; 1.使用JS中with关键字 with(json) { console.log(name);//输出:zhangsan console.log(年龄);//输出:23 console.log(404);//输出:404,用这种方法读取key是数字的属性,有问题 } 2.最常见的传统的读取key console.

  • 详解json string转换为java bean及实例代码

    详解json string转换为java bean及实例代码 pom中添加如下两个库: <dependency> <groupId>org.codehaus.jackson </groupId> <artifactId>jackson-core-asl</artifactId> <version>1.9.2</version> <scope>provided</scope> </depende

  • 详解json在SpringBoot中的格式转换

    @RestController自动返回json /** * json 三种实现方法 * 1 @RestController自动返回json */ @GetMapping("/json") public Student getjson() { Student student = new Student("bennyrhys",158 ); return student; } @ResponseBody+@Controller 组合返回json //@RestContr

  • 简易版本JSON.stringify的实现及其六大特性详解

    目录 前言 JSON.stringify六大特性 特性一 特性二 特性三 特性四 特性五 特性六 手动实现stringify 总结 前言 JSON.stringify是一个使用非常高频的API,但是其却存在一个特性,我们在使用的过程中需要留意这些特性以避免为代码程序埋雷,那么接下来便一起动手实现一个简易版本的jsonStringify函数 JSON.stringify六大特性 特性一 布尔值.数字.字符串的包装对象在序列化过程中会自动转换成对应的原始值 现在有这么一个对象: const obj

  • 实例详解JSON数据格式及json格式数据域字符串相互转换

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成. 基础结构 JSON建构于两种结构: 1. "名称/值"对的集合(A collection of name/value pairs).不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictionary),哈希表(hash t

  • 详解JSON Web Token 入门教程

    详解JSON Web Token 入门教程

    JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法. 一.跨域认证的问题 互联网服务离不开用户认证.一般流程是下面这样. 1.用户向服务器发送用户名和密码. 2.服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色.登录时间等等. 3.服务器向用户返回一个 session_id,写入用户的 Cookie. 4.用户随后的每一次请求,都会通过 Cookie,将 session_id 传回服务器. 5.服务器收到 session

  • 详解JSON和JSONP劫持以及解决方法

    json劫持 json劫持攻击又为"JSON Hijacking",攻击过程有点类似于csrf,只不过csrf只管发送http请求,但是json-hijack的目的是获取敏感数据. 一些web应用会把一些敏感数据以json的形式返回到前端,如果仅仅通过cookie来判断请求是否合法,那么就可以利用类似csrf的手段,向目标服务器发送请求,以获得敏感数据. 比如下面的链接在已登录的情况下会返回json格式的用户信息: http://www.test.com/userinfo 攻击者可以在

  • 详解json串反转义（消除反斜杠）

    JSon串在被串行化后保存在文件中,读取字符串时,是不能直接拿来用JSON.parse()解析为JSON  对象的.因为它是一个字符串,不是一个合法的JSON对象格式.例如下面的JSON串保存在文件中,读出来不能直接解析: "{\"resourceId\":\"dfead70e4ec5c11e43514000ced0cdcaf\",\"properties\":{\"process_id\":\"proce

随机推荐