JSON.stringify与JSON.parse

2024-05-31 14:08
文章标签 json parse stringify

本文主要是介绍JSON.stringify与JSON.parse，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

outline

  1. Using native JSON
  2. MDN’s JSON
  3. 用JSON.stringify来dump对象

Using native JSON

这里介绍是兼容ECMAScript 5 标准的原生JSON对象.
原生的JSON对象包含两个关键方法
1.JSON.parse() 解析JSON字符串,并且重构为JavaScript对象.具体使用如下:

1
2
3

var jsonString = '{"bar":"property","baz":3}';
var jsObject = JSON.parse(jsonString);
console.log(jsObject)   //Object {bar: "property", baz: 3}

JSON.parse()不允许最后一个键值对后面存在逗号

具体来说就是下面这样:

1
2
3
4

var jsObject = JSON.parse("[1, 2, 3, 4, ]");   
//Uncaught SyntaxError: Unexpected token ] in JSON at position 13
var jsObject = JSON.parse("{ \"foo\" : 1, }");  
//Uncaught SyntaxError: Unexpected token } in JSON at position 13

2.JSON.stringify() 将javascript对象转换为等价的JSON字符串.

1
2
3

var foo = {bar:"new property",baz:3};
var jsonString = JSON.stringify(foo);
console.log(jsonString);//{"bar":"new property","baz":3}

注意:由于JSON规范的限制,如果一个对象存在属性值为函数的属性,则在使用JSON.stringify()方法对该对象进行序列化时.这个属性将不会被遍历到.

具体来说就是下面这样:

1
2
3
4
5
6

var foo = {bar:"new property",baz:3,getName:function(){return 'foo'}};
var jsonString = JSON.stringify(foo);
console.log(jsonString);
//{"bar":"new property","baz":3}
//这里是不会显示{"bar":"new property","baz":3,"getName":function...}的
//TODO留个问题,如果我们想强制JSON.stringify显示"getName":"function (){return 'foo'}"该怎么办

同时注意一下下面这两段代码:

1
2
3
4
5
6
7
8
9
10
11
12

//test的值是undefined的情况
//则做JSON.stringify的时候不显示test这个字段
var foo = {bar:"new property",baz:3,getName:function(){return 'foo'},test:undefined};
var jsonString = JSON.stringify(foo);
console.log(jsonString);//{"bar":"new property","baz":3}
//{"bar":"new property","baz":3}

//但是如果test的值是null则会显示
var foo = {bar:"new property",baz:3,getName:function(){return 'foo'},test:null};
var jsonString = JSON.stringify(foo);
console.log(jsonString);//{"bar":"new property","baz":3}
//{"bar":"new property","baz":3,"test":null}

上面这段代码主要说下默认情况下,如果属性值是undefined的时候,即表示属性值还没有被赋值,JSON.stringify是不会显示这个属性值,但是null表示变量是被赋值的,表示一个空值,执行JSON.stringify的时候会显示.

MDN’s JSON

MDN上这样定义JSON.parse(jsonString),JSON.stringify(value [, replacer [, space]]),这里JSON.parse(jsonString)没什么好说的,使用的时候注意]和}之前不要加莫名其妙的,就好.这里重点看看JSON.stringify

value
将要转为JSON字符串的javascript对象.
replacer
该参数可以是多种类型,如果是一个函数,则它可以改变一个javascript对象在字符串化过程中的行为, 如果是一个包含 String 和 Number 对象的数组,则它将作为一个白名单.只有那些键存在域该白名单中的键值对才会被包含进最终生成的JSON字符串中.如果该参数值为null或者被省略,则所有的键值对都会被包含进最终生成的JSON字符串中.
space
该参数可以是一个 String 或 Number 对象,作用是为了在输出的JSON字符串中插入空白符来增强可读性. 如果是Number对象, 则表示用多少个空格来作为空白符; 最大可为10,大于10的数值也取10.最小可为1,小于1的数值无效,则不会显示空白符. 如果是个 String对象, 则该字符串本身会作为空白符,字符串最长可为10个字符.超过的话会截取前十个字符. 如果该参数被省略 (或者为null), 则不会显示空白符

MDN

看到这边,相信大家对于这个用法可能有些疑惑,TMD的原来JSON.stringify还能这样用.下面我来举几个例子,一方面解决我上面留的两个问题,另一方面展示一下MDN关于JSON.stringify的定义.废话不多说,直接上代码.首先我们来看replacer 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//replacer为函数的情况,我们顺便把上面的两个问题解决下
//对于第一个问题,默认情况下JSON.stringify对于类型是function的属性是不显示的.
//下面我们写个replacer函数
var censor = function(key,value){
    if(typeof(value) == 'function'){
         return Function.prototype.toString.call(value)
    }
    return value;
}
var foo = {bar:"new property",baz:3,getName:function(){return 'foo'}};
console.log(JSON.stringify(foo,censor))
//{"bar":"new property","baz":3,"getName":"function (){return 'foo'}"}
//这里我们用replacer函数改变了JSON.stringify的默认行为.

//对于第二个问题,看了第一个题目的解决思路,大家可能都会了
//还是加上判断,给出对于undefined的情况下的处理方式
//但是注意下这里不能直接返回undefined,否则对应的属性还是不出现
//这里我们返回一个'undefined'字符串表示这个属性是undefined
var censor = function(key,value){
    if(value === undefined){
         return 'undefined'
    }
    return value;
}
var foo = {bar:"new property",baz:3,test:undefined};
console.log(JSON.stringify(foo,censor))
//{"bar":"new property","baz":3,"test":"undefined"}

这里总结下,当replacer参数为函数的情况下,可以修改JSON.stringify的默认行为.
当replacer参数不为function的时候:

1
2
3
4
5
6
7
8
9
10
11
12

//当replacer参数为包含 String 和 Number 对象的数组的情况下:
var foo = {a:"1",b:2,c:true};
console.log(JSON.stringify(foo,['a','c']))
//{"a":"1","c":true}

//当replacer参数为null的情况下:
console.log(JSON.stringify(foo,null))
//{"a":"1","b":2,"c":true}

//当replacer忽略的情况下:
console.log(JSON.stringify(foo))
//{"a":"1","b":2,"c":true}

这里replacer参数不为function类型的参数时,忽略该参数或者为null的时候,执行JSON.stringify的默认行为;如果为Sting、Number类型的数组时,相当于一个IP白名单,只有数组列出来的属性才能被显示.

下面我们来说说space参数
1.如果space参数为String类型的情况下,则默认取前String的前10个字符作为分割符
2.如果space参数为Number类型的情况下,则表示space个空格(space<=10,大于10取10)
直接看效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//space参数为String的情况下:
var foo = {a:"1",b:2,c:true};
console.log(JSON.stringify(foo,null,'test'))
/*
{
test"a": "1",
test"b": 2,
test"c": true
}
*/
//space参数为Number的情况下:
var foo = {a:"1",b:2,c:true};
console.log(JSON.stringify(foo,null,4))
/*
{
    "a": "1",
    "b": 2,
    "c": true
}
*/

在上面这段代码中,很偶然的我们使用4个空白符可以很好的dump对象(4个空白符不是正好就是一个tab么)

最后提一下toJSON方法

如果一个被序列化的对象拥有 toJSON 方法，那么该 toJSON 方法就会覆盖该对象默认的序列化行为：不是那个对象被序列化，而是调用 toJSON 方法后的返回值会被序列化

1
2
3
4
5
6
7
8

var obj = {
    foo: 'foo',
    toJSON:function(){
        return 'bar';
    }
}
JSON.stringify(obj);//'"bar"'
JSON.stringify({x:obj});//'{"x":"bar"}'

利用toJSON方法,我们可以修改对象转换成JSON的默认行为.

用JSON.stringify来dump对象

在日常是用中,我们可能会dump一些复杂的对象,这些对象往往对象内嵌套对象.直接看起来并不那么直观,结合上面的的replacer和space参数,我们可以这样dump复杂对象

1
2
3
4
5
6
7
8

var censor = function(key,value){
    if(typeof(value) == 'function'){
         return Function.prototype.toString.call(value)
    }
    return value;
}
var foo = {bar:"new property",baz:3,o:{name:'warjiang',age:23,info:{sex:'male',getSex:function(){return 'sex';}}}};
console.log(JSON.stringify(foo,censor,4))

效果如下:
dumpobject.png
原文链接：http://warjiang.github.io/devcat/2016/05/03/%E4%BD%A0%E7%9C%9F%E7%9A%84%E6%87%82JSON-stringify%E4%B8%8EJSON-parse%E4%B9%88/?hmsr=toutiao.io&amp;utm_medium=toutiao.io&amp;utm_source=toutiao.io#

这篇关于JSON.stringify与JSON.parse的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1018140。

相关文章

Java解析JSON的六种方案

Java解析JSON的六种方案

《Java解析JSON的六种方案》这篇文章介绍了6种JSON解析方案,包括Jackson、Gson、FastJSON、JsonPath、、手动解析,分别阐述了它们的功能特点、代码示例、高级功能、优缺点... 目录前言1. 使用 Jackson：业界标配功能特点代码示例高级功能优缺点2. 使用 Gson：轻量
阅读更多...
python中json.dumps和json.dump区别

python中json.dumps和json.dump区别

《python中json.dumps和json.dump区别》json.dumps将Python对象序列化为JSON字符串,json.dump直接将Python对象序列化写入文件,本文就来介绍一下两个... 目录1、json.dumps和json.dump的区别2、使用 json.dumps() 然后写入文
阅读更多...
Java中JSON字符串反序列化(动态泛型)

Java中JSON字符串反序列化(动态泛型)

《Java中JSON字符串反序列化(动态泛型)》文章讨论了在定时任务中使用反射调用目标对象时处理动态参数的问题,通过将方法参数存储为JSON字符串并进行反序列化,可以实现动态调用,然而,这种方式容易导... 需求：定时任务扫描，反射调用目标对象，但是，方法的传参不是固定的。方案一：将方法参数存成jsON字
阅读更多...
php中json_decode()和json_encode()

php中json_decode()和json_encode()

1.json_decode() json_decode (PHP 5 >= 5.2.0, PECL json >= 1.2.0) json_decode — 对 JSON 格式的字符串进行编码 说明 mixed json_decode ( string $json [, bool $assoc ] ) 接受一个 JSON 格式的字符串并且把它转换为 PHP 变量 参数 json
阅读更多...
struts2中的json返回指定的多个参数

struts2中的json返回指定的多个参数

要返回指定的多个参数，就必须在struts.xml中的配置如下： <action name="goodsType_*" class="goodsTypeAction" method="{1}"> <!-- 查询商品类别信息==分页 --> <result type="json" name="goodsType_findPgae"> <!--在这一行进行指定，其中lis是一个List集合，但
阅读更多...
tiptap parseHTML renderHTML 使用

tiptap parseHTML renderHTML 使用

要在 Tiptap 中使用 parseHTML 和 renderHTML，可以通过创建自定义扩展来解析和渲染自定义的 HTML 元素。这两个方法允许你定义如何将 HTML 解析为 ProseMirror 文档节点以及如何将 ProseMirror 的文档节点渲染为 HTML。 1. parseHTML parseHTML 用于将 HTML 元素解析为 ProseMirror 节点。在自定义扩展
阅读更多...
特殊JSON解析

特殊JSON解析

一般的与后台交互；都会涉及到接口数据的获取；而这里的数据一般情况就是JSON 了；JSON 解析起来方便；而且数据量也较小一些；所以JSON在接口数据返回中是个很不错的选择。 下面简单说下JSON解析过程中的一些案例： 这里我用到了三方的架包：fastjson-1.1.39.jar 架包 可以在我的博客中找到下载；或者网上找下 很多的； 这里主要就是映射  关系了；这就要求：实体类的名称和
阅读更多...
用ajax json给后台action传数据要注意的问题

用ajax json给后台action传数据要注意的问题

必须要有get和set方法   1 action中定义bean变量，注意写get和set方法 2 js中写ajax方法，传json类型数据 3 配置action在struts2中
阅读更多...
go json反序列化成指定类型

go json反序列化成指定类型

简介 简单的介绍一下使用go的json库，将json字符串反序列化成接口中指定的实现类 代码如下 package usejsontype ExamInterface interface {CheckRule(data any) bool}type IntStru struct {DefalutVal int `json:"defalut_val"`Max int `json:
阅读更多...
Java构造和解析Json数据的两种方法（json-lib构造和解析Json数据， org.json构造和解析Json数据）

Java构造和解析Json数据的两种方法（json-lib构造和解析Json数据， org.json构造和解析Json数据）

在www.json.org上公布了很多JAVA下的json构造和解析工具，其中org.json和json-lib比较简单，两者使用上差不多但还是有些区别。下面首先介绍用json-lib构造和解析Json数据的方法示例。 一、介绍       JSON-lib包是一个beans,collections,maps,java arrays 和XML和JSON互相转换的包，主要就是用来解析Json
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2