浅谈js中的json.stringify()和json.parse()

author author     2023-04-23     647

关键词:

参考技术A

我们知道, JSON.stringify() 和 JSON.parse() 是一对处理JSON数据的方法,前者是将JSON对象序列化为字符串,而后者是将JSON字符串解析为JSON对象。

但是你有较为深入地去了解过它们吗?它们分别可以传入几个参数以及每个参数对应的作用是什么你知道吗?

它可以传入三个参数, 参数1 是需要字符串化的对象, 参数2 是用于指定对象序列化过程中需要被处理的属性, 参数3 是用于指定输出字符串的缩进格式。后两个参数是可选的,而我们最常用的就是只传一个参数。

需要字符串化的对象,且该对象须是安全的JSON对象,而对于不安全的JSON对象都不能被正常序列化。

何为不安全的JSON对象?

undefined、function、symbol 和包含循环的引用的对象都不符合JSON结构标准,所以它们本身以及包含它们的对象都是不安全的JSON对象。

那么对于不安全的JSON对象, JSON.stringify() 会如何处理它们呢?

单独处理它们,直接返回 undefined 。

包含它们的对象,自动将其忽略。例如:

包含它们的数组,自动将其转成 null 。例如:

如果两个对象之间互相引用,形成一个无限循环,那么无论对其中的哪个对象进行JSON字符串化都会直接报错!例如:

对该类对象进行JSON字符串化,会先调用 toJSON() 方法,然后用它的返回值来进行序列化。例如:

正常按照前面讲的忽略 function 来说应该要返回 ""a":1" 才对嘛,为啥是 undefined 呢? 这就是因为包含 toJSON() 方法的缘故,只要有它,直接就处理它的返回值。上例中因为 toJSON() 方法返回值是个不安全的JSON对象,所以就按照前面 ① 中讲的方式来处理了。

再看个例子你就明白了:

用于指定对象序列化过程中需要被处理的属性,它可以是数组或函数。

必须是字符串数组,其中包含序列化要处理的对象的属性名称,除此之外的其他属性会被忽略。例如:

该函数会先调用对象本身,然后遍历对象的每个属性。函数传入两个参数,第一个为属性名(key),第二个为属性值(value)。开始调用对象本身时,第一个参数key为空字符串,第二个参数value为对象本身,而此时函数的返回值会直接替换原对象。而后每次遍历对象属性时的返回值都会替换原有该属性的值。例如:

看到了吗?每一次遍历返回值都可能会对最终的处理结果产生影响。我们再看个例子:

用于指定输出字符串的缩进格式。它可以是正整数,也可以是字符串。当是正整数时,它指定的是每一级缩进的字符数,当它是字符串时,该字符串的前十个字符将会被用于每一级的缩进。例如:

最后输出结果为:

可以看到,无论传入的字符串有多长,最终只会取前十个字符用于缩进填充。

了解完了 JSON.stringify() ,我们再来看看它的逆操作函数 JSON.parse() 。

它可以传入两个参数, 参数1 是需要被解析的字符串, 参数2 是用于修改解析生成的原始值。后一个参数是可选的,而我们最常用的就是只传一个参数。

该参数必须是符合JSON规范的字符串,如果是其他类型,则会被强制类型转换成字符串格式,如果不符合JSON规范,则会报错!例如:

注意JSON字符串中的key必须有双引号(单引号也不行),不然是不符合JSON规范的。

该参数是个函数,作用类似于前面 JSON.stringify() 的第二个参数replacer,同样是对属性进行遍历,同样有key和value两个参数。我们具体来看个例子:

看到了吗?前面属性的遍历可以修改输出对象的属性值,但最终输出的值关键还是取决于key为空字符串时的返回值,它可以将之前所有的努力都变为徒劳!

原生js实现json.parse()和json.stringify()(代码片段)

-首先JSON.stringify()是将js对象转换为JSON形式实现思路:通过递归调用,来实现对转换对象Object的深层value进行遍历,利用array的join实现最终字符串拼接functionmyJsonStringify(obj)lettype=typeofobj;if(type!=="object"||type===null)if(/string|undefined|funct 查看详情

js数组使用json.stringify和tostring的区别

js中eval()和$.parseJSON()的区别以及JSON.stringify()1.第一个区别是:安全性json格式非常受欢迎,而解析json的方式通常用JSON.parse()但是eval()方法也可以解析,这两者之间有什么区别呢?JSON.parse()之可以解析json格式的数据,并且会对要解... 查看详情

js中解析json时候的eval和$.parsejson()的区别以及json.stringify()

1.第一个区别是:安全性    json格式非常受欢迎,而解析json的方式通常用JSON.parse()但是eval()方法也可以解析,这两者之间有什么区别呢?   JSON.parse()之可以解析json格式的数据,并且会对要解析的字符串... 查看详情

js数组转换成json串(json.stringify)

例如:var giftlist[1490011777]=[];giftlist[1490011777][‘id‘]= 1490011777;giftlist[1490011777][‘name‘]= "礼包测试";giftlist[1490011777][‘desc‘]= "详情"; 转换json串varjsonStr=JSON.stringify 查看详情

JSON.stringify() 数组的怪异与 Prototype.js

】JSON.stringify()数组的怪异与Prototype.js【英文标题】:JSON.stringify()arraybizarrenesswithPrototype.js【发布时间】:2012-11-2502:06:51【问题描述】:我正在尝试找出我的json序列化出了什么问题,将我的应用程序的当前版本与旧版本一起使用... 查看详情

text[stringify循环json对象]#js#json#stringify#cyclic#object(代码片段)

查看详情

Node.js - 使用 json.stringify 时,正文搞砸了

】Node.js-使用json.stringify时,正文搞砸了【英文标题】:Node.js-Bodyismessedupwhenusingjson.stringify【发布时间】:2014-07-3116:19:49【问题描述】:客户:$.ajax(url:some_url,type:\'post\',dataType:\'json\',data:JSON.stringify(myArray:[])...$.ajax(url:some 查看详情

浅谈php中的数组和js中的数组

最近在做前后端对接的时候,遇到一个问题,前端要求返回的数据格式是左边的,但是我通过json_encode返回到的数据格式是右边的 注意:数据格式从"[]"(数组)变成了"{}"(对象)  google了下,发现:javascript不支持关... 查看详情

来自 MySQL 数据库的查询在 node.js 和 JSON.stringify() 中返回 [Object] [Object] 似乎不起作用

】来自MySQL数据库的查询在node.js和JSON.stringify()中返回[Object][Object]似乎不起作用【英文标题】:QueryfromMySQL\'sdatabasereturns[Object][Object]innode.jsandJSON.stringify()donotseemtowork【发布时间】:2020-01-2823:30:24【问题描述】:我正在使用MySQL数... 查看详情

js中json.stringify()与json.parse()与eval()详解及使用案例

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语言,作用是易于阅读和编写,同时也易于机器解析和生成... 查看详情

浅谈js闭包

  闭包是js学习中的一个重要知识点,那么js闭包是什么?  Js闭包就是一个函数。但是这个函数与js众一般的函数又有一点不同,不同之处在于闭包能够获取其他函数体内的变量。这里简单回顾一下js中有关变量的学习内容... 查看详情

js解析与序列化json数据(一)json.stringify()的基本用法

...进行了规范,定义了全局对象JSON。JSON对象有两个方法:stringify()和parse()。在最简单的情况下,这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript。例如:新建一个HTML:代码如下:复制代码... 查看详情

使用 JSON.stringify(queryObject) 时来自 mongoose js 的意外行为

】使用JSON.stringify(queryObject)时来自mongoosejs的意外行为【英文标题】:UnexpectedbehaviorfrommongoosejswhenusingJSON.stringify(queryObject)【发布时间】:2021-08-2821:30:08【问题描述】:当我执行JSON.stringify(theKey:\'some\\thing\'时,结果将是:"theKey":"s... 查看详情

js中json.stringify()方法,将js对象转换成字符串,传入服务器

...在向服务器发送数据时一般是字符串。我们可以使用JSON.stringify()方法将JavaScript对象转换为字符串。语法JSON.stringify(value[,replacer[,space]])参数说明:value:必需,要转换的JavaScript值(通常为对象或数组)。replacer:可选。用于转换结... 查看详情

Node.js JSON.stringify() 在输出中导致“。无法使用 Jquery 解析

】Node.jsJSON.stringify()在输出中导致“。无法使用Jquery解析【英文标题】:Node.jsJSON.stringify()causing"inoutput.Can\'tparsewithJquery【发布时间】:2012-06-2405:41:35【问题描述】:我正在使用Node.js(与Express.js)将JSON数据对象从服务器传... 查看详情

js之json.stringify()使用详解

参考技术A方法定义:JSON.stringify(value,replacer,space)参数说明:value:js对象replacer:替换对象,可以是一个方法、对象或数组,将value按照替换规则展示。space:填充参数,可以是数字或字符串,将value按照参数进行格式化展示。方... 查看详情

TypeError: JSON.stringify(...).then 不是一个函数 - React JS

】TypeError:JSON.stringify(...).then不是一个函数-ReactJS【英文标题】:TypeError:JSON.stringify(...).thenisnotafunction-ReactJS【发布时间】:2020-04-1705:49:41【问题描述】:我正在尝试将我的react应用程序与登录页面的后端连接起来。我正在使用承... 查看详情

Fabric.js:有啥方法可以在 JSON.stringify(canvas) 生成的 Json 中保存 url 而不是 svg 图像的路径?

】Fabric.js:有啥方法可以在JSON.stringify(canvas)生成的Json中保存url而不是svg图像的路径?【英文标题】:Farbic.js:IsthereanywaytosaveurlinsteadofpathsofsvgimageintheJsongeneratedbyJSON.stringify(canvas)?Fabric.js:有什么方法可以在JSON.stringify(canvas)生成的... 查看详情