37.javascript对象与json格式的转换,json.stringifyjson.parse方法的使用方法和注意事项(代码片段)

@魏大大 @魏大大     2022-11-30     137

关键词:


文章目录


JSON处理

JSONJavaScript Object Notation)是JavaScript表达值和对象的通用数据格式,其本质就是符合一定规范的字符串。由于JSON的优良特性,非常容易和其他语言进行数据交换,尤其在前后端交互方面。即使我们前端使用JavaScript,后端使用Java/PHP/Python同样可以使用JSON格式的数据轻松交换。

JSON.stringify

JavaScript为我们提供了简单的方法可以实现对象和字符串之间的转化。

  1. JSON.stringify将对象转为JSON字符串;
  2. JSON.parseJSON字符串转为对象;

例如,我们把一个对象Dog使用 JSON.string转为JSON字符串:

let Dog = 
    name:'Peter',
    age:187,
    gender:'male',
    hands:['hand01','hand02','hand03','hand04'],
    childs:[
        
            name:'little peter01',
            age:2,
            gender:'male',
            hands:['hand01','hand02','hand03','hand04'],
            childs:[]
        ,
        
            name:'little peter02',
            age:3,
            gender:'male',
            hands:['hand01','hand02','hand03','hand04'],
            childs:[]
        
    ]

let dogJson = JSON.stringify(Dog)
console.log(typeof dogJson)
console.log(dogJson)

代码的执行效果:

可见,使用JSON.stringify(obj)方法会返回该对象objJSON字符串数据,这个转换的过程可以称作JSON编码(JSON-encoded)序列化(serialized),亦或者编组化(marshalled)。当对象转为普通的字符串后,我们就可以以普通数据的格式存储、传递这些数据。

如果我们把这些字符串写入数据库,就相当于把JavaScript对象存进了数据库。

注意:

  1. JSON编码的对象统一使用双引号,没有单引号和反引号;
  2. 对象的属性名也用双引号,这是强制的;

JSON已经发展成为了独立的数据规范,因此归属于JavaScript语言本身的非数据属性会被JSON.stringify跳过。

包括:

  1. 对象方法;
  2. Symbol类型
  3. undefined的属性
let user = 
    sayHello()//函数被忽略
        console.log('hello world');
    ,
    [Symbol('id')]:996996,//Symbol被忽略
    val:undefined//undefined值被忽略

console.log(JSON.stringify(user))

代码执行效果:

可以看到,里面啥也没有。

stringify的限制

并非所有的对象都能转为JSON格式,如果对象之间存在循环引用,就会导致转换失败。

let father = 
let son = 
father.son = son
son.father = father
JSON.stringify(father)

代码执行结果:

这里出现错误的原因就是存在对象间的循环引用,Father引用了Son,而Son又反过来引用了Father

排除和替换

如果我们只希望将对象的个别属性转为JSON格式,或者摆出循环应用中的属性,应该怎么做呢?

JSON.stringify已经为我们提供了解决方法:

let  json = JSON.stringify(obj[,replacer,space])

参数解读:

  1. obj:要编码的对象
  2. replacer:要编码的属性数组或者映射函数function(k,v)
  3. space:用于格式化的空格数量

举个例子:

let father = 
    name:'father',
    age:28

let son = 
    name:'son',
    age:4

father.son = son;
son.father = father;
console.log(JSON.stringify(father,['name','age']))

代码的执行结果如下:

如果我们在第二个参数传入一个数组,那么JSON.stringify就会只把数组中的名称转为JSON格式,这样计算对象存在循环引用,同样能够成功的转格式。

如果我们希望序列化出循环应用外的所有对象属性,只需要把对象的所有属性名写入数组即可,这对对象的子对象同样生效。

举个例子:

let father = 
    name:'father',
    age:28,
    car:
        car_name : "BYD",
        car_age:3,
    

console.log(JSON.stringify(father,['name','car','car_name']))

代码执行结果:

但是,还存在一个问题,如果对象属性特别多,可能数组就会非常长,代码也会很冗长。

这种情况下就需要使用映射函数

映射函数

我们可以创建一个函数,代替数组作为replacer,这个函数接收(key,value)作为参数,并决定如何序列化对应的属性。

例如,在解决循环引用的时候,我们排除引用属性:

let father = 
    name:'father',
    age:28,
    car:
    	car_name : "BYD",
        car_age:3,
	

let son = 
    name:'son',
    age:4

father.son = son;
son.father = father;
console.log(JSON.stringify(father,function replacer(key,value)
    console.log(`$key:$value`)
	return (key=='son')?undefined:value;
))

代码执行结果如下:

由于值为undefined的属性会被JSON.stringify忽略,这样我们就可以轻松的排除所有不希望出现的属性了。

格式化使用的空格数量

JSON.stringify(value, replacer, spaces)的第三个参数spaces可以指定JSON字符串的缩进空格数,常用的数值有2、4两种,相信童鞋们已经在编辑代码的时候有过修改缩进tab空格数的经历了。

在上文案例中,我们没有指定缩进空格数量,所以格式化后的JSON字符串都是没有格式的。

举个例子:

let Dog = 
    name:'Peter',
    age:187,
    gender:'male',
    hands:['hand01','hand02','hand03','hand04'],
    childs:[
        
            name:'little peter01',
            age:2,
            gender:'male',
            hands:['hand01','hand02','hand03','hand04'],
            childs:[]
        ,
        
            name:'little peter02',
            age:3,
            gender:'male',
            hands:['hand01','hand02','hand03','hand04'],
            childs:[]
        
    ]

let dogJson = JSON.stringify(Dog,null,2)
console.log(dogJson)

代码的执行结果:

对比本文的第一个案例,是不是这样的缩进看起来好看多了呢?

自定义toJSON方法

在之前的文章中,我们讲到每个对象都有的toString方法,当进行格式转换时会自动调用。和toString一样,对象的toJSON方法会在序列化的时候调用,我们可以通过重写这个方法改变序列化的方式。

例如:

let dog = 
    name : 'peter',
    age:18

console.log(JSON.stringify(dog))
dog.toJSON = function()
    return this.age;

console.log(JSON.stringify(dog))

代码执行结果:

我们可以看到,在重写了对象的toJSON方法后,使用stringify的结果发生了改变。

我们可以根据自己的需要重写toJSON方法,从而达到自己的目的。

JSON.parse

上文讲到了如何使用JSON.stringify把对象转为JSON格式的字符串,这里就详细介绍如何把JSON字符串转为对象。

语法:

let obj = JSON.parse(str,[reviver])
  1. str 要解析的 JSON 字符串。

  2. reviver 可选的函数 function(key,value),该函数将为每个 (key, value) 对调用,并可以对值进行转换。

例如:

let str_arr = '[1,2,3]'//数组字符串
let arr = JSON.parse(str_arr)
console.log(typeof arr)

代码执行结果:

对于复杂的嵌套对象:

let str_obj = `
  "name": "Peter",
  "age": 187,
  "gender": "male",
  "hands": [
    "hand01",
    "hand02",
    "hand03",
    "hand04"
  ],
  "childs": [
    
      "name": "little peter01",
      "age": 2,
      "gender": "male",
      "hands": [
        "hand01",
        "hand02",
        "hand03",
        "hand04"
      ],
      "childs": []
    ,
    
      "name": "little peter02",
      "age": 3,
      "gender": "male",
      "hands": [
        "hand01",
        "hand02",
        "hand03",
        "hand04"
      ],
      "childs": []
    
  ]
`
let obj = JSON.parse(str_obj)
console.log(obj.name)

代码执行结果:

注意:JSON不支持注释,在JSON中添加注释时错误的行为

有一种名为JSON5的格式,可以有不加引号的键、允许注释,但是这是独立的库,补上官方标准。

常规的JSON格式严格,这样是为了保证数据的可靠、快速解析算法

使用reviver

既然JSON.parse能够直接转字符串为对象,为啥还要再搞reviver呢?

场景举例:

如果我们有一个对象字符串如下:

// title: (meetup title), date: (meetup date)
let str = '"title":"Conference","date":"2017-11-30T12:00:00.000Z"';

现在我们要将它转为对象,存在什么问题呢?

let str = '"title":"Conference","date":"2017-11-30T12:00:00.000Z"';
let obj = JSON.parse(str)
obj.date.getDate();//Error

代码执行结果如下:

造成这种结果的原因是date属性被转为了字符串,而不是Date对象。

这个时候就需要我们使用reviver函数将date转为Date对象:

let str = '"title":"Conference","date":"2017-11-30T12:00:00.000Z"';
let obj = JSON.parse(str,function(key,value)
    if(key=='date')return new Date(value)
    return value
)
obj.date.getDate();

代码执行效果:

顺便说一下,这也适用于嵌套对象:

let schedule = `
  "meetups": [
    "title":"Conference","date":"2017-11-30T12:00:00.000Z",
    "title":"Birthday","date":"2017-04-18T12:00:00.000Z"
  ]
`;

schedule = JSON.parse(schedule, function(key, value) 
  if (key == 'date') return new Date(value);
  return value;
);

alert( schedule.meetups[1].date.getDate() ); // 正常运行了!

总结

  1. JSON是一种数据格式,有独立的标准和大多数编程语言的支持
  2. JSON支持Object、array、string、number、boolean和null
  3. JSON.stringify
  4. JSON.parse

json_常用类json与对象的互相转换typereference泛型遇到的坑(代码片段)

文章目录①.fastJson-常用类②.定义-JSON格式③.简单对象与JSON转换④.数组类型与JSONArray⑤.复杂json格式转换⑥.JSON与javaBean转换⑦.TypeReference泛型⑧.JSON.toJSONString的坑①.fastJson-常用类①.fastJson对于json格式字符串的解析主要用到了一... 查看详情

json_常用类json与对象的互相转换typereference泛型遇到的坑(代码片段)

文章目录①.fastJson-常用类②.定义-JSON格式③.简单对象与JSON转换④.数组类型与JSONArray⑤.复杂json格式转换⑥.JSON与javaBean转换⑦.TypeReference泛型⑧.JSON.toJSONString的坑①.fastJson-常用类①.fastJson对于json格式字符串的解析主要用到了一... 查看详情

java对象数据与json对象数据之间的相互转换(fastjson)(代码片段)

Java对象或集合数据与JSON格式数据之间的转换1、JSON是什么2、JSON数据格式对照3、主流JSON库对比3.1、json-lib【不推荐使用】3.2、Jackson【根据场景使用】3.3、Gson【根据场景使用】3.4、FastJson【根据场景使用】4、FastJson常用的JSON格式... 查看详情

jsonobject.fromobject--json与对象的转换

...et/qq635785620/article/details/10436789JSON与JAVA数据的转换(JSON即JavaScriptObjectNatation,它是一种轻量级的数据交换格式,非常适合于服务器与JavaScript的交互。)代码中有这么一句,是后台的封装数据。JSONObjectjo=JSONObject.fromObject(m 查看详情

json字符串与json对象的相互转换

什么是JSON?JSON指的是JavaScript对象表示法(JavaScriptObjectNotation)JSON是轻量级的文本数据交换格式JSON独立于语言*JSON具有自我描述性,更易理解*JSON使用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台。JSON解析器和JSO... 查看详情

fastjson对于json格式字符串json对象及javabean之间的相互转换

...三个类:JSON:fastJson的解析器,用于JSON格式字符串与JSON对象及javaBean之间的转换。JSONObject:fastJson提供的json对象。JSONArray:fastJson提供json数组对象。我们可以把JSONObject当成一个Map<String,Object>来看,只是JSONObject 查看详情

python对象与json相互转换的方法

...对于python来讲,将类转化为json数据以及将json数据转化为对象是一件非常容易的事情。下面给出两者转化的方法?12345678910111213141516171819202122232425262728293031323334353637#-*-coding:UTF-8-*-importjson  #自定义类classMyC 查看详情

javascriptjson字符串与对象相互转换

  在实际项目中,经常遇到字符格式的问题,记下来以便日后方便查看。用到两个函数:JSON.stringify()和JSON.parse()。  使用ajax向后台请求数据,后台给前端返回数据,明明后端脚本写的是json函数处理后的json格式,但是前端... 查看详情

对象转换为json格式,类似中间层api

...头扎进SpringMvc视频教程《一头扎进SpringMvc》第四讲源码》对象自动转换为json格式要在spring-mvc.xml添加一个东西,和对应的命名空间引用和规范,和对应的jar包<!--支持对象与json的转换。--><mvc:annotation-driven/> //注解驱... 查看详情

json-lib进行java与json字符串转换之一

这篇文章主要介绍了在java中,JSON字符串与java对象的相互转换实例详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下。在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML、JSON等,JSON作为一个轻量级的... 查看详情

geojson的生成与解析,json解析,java读写geojson,geotools读取shp文件,geotools中geometry对象与geojson的相互转换(代码片段)

...eotools读取shp文件5.1pom.xml5.2读取shp文件六、Geotools中Geometry对象与GeoJson的相互转换6.1pom.xmlimport包6.2LineString–>geojson6.3geo 查看详情

androidgson使用--json2对象与对象2json

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种理想的数据交换格式。    其实,要创建和解析JSON数据,也可以使用GSON来完成。GSON是Google提... 查看详情

把普通对象转换成json格式的对象

...新的数据类型)varobj={name:"中国",age:5000};//->普通格式的对象varjsonObj={"name":"中国","age":5000};//->JSON格式的对象(只要把普通对象的属性名用""(不能是‘‘)包起来,这样的格式就是我们JSON格式的对象)vardata=[{name:"",age:""} 查看详情

javascript浅拷贝与深拷贝以及对象与json格式的转换json.stringifyjson.parse

...xff0c;两个对象改变互不影响。  首先简单介绍JSON(JavaScriptObjectNotation)是JavaScript表达值和对象的通用数据格式,其本质就是符合一定规范的字符串。由于JSON的优良特性,非常容易和其他语言进行数据交换,... 查看详情

java对象转换成json字符串与javastring有啥区别

本质上没什么区别,不过jsonjava和javascript等语言都有对json格式的串的解析包,可以转成对象便于操作,如将json转成map或array参考技术A前台接受到的json对象本身就是一个字符串,只不过比一般的字符串多了一些格式,便于拆分出... 查看详情

fastjsonjson对象及javabean之间的相互转换

...<T>这个类,使用泛型可以更加清晰/***json字符串-简单对象与JavaBean_obj之间的转换*/publicstaticvoidtestJSONStrToJavaBeanObj(){Studentstudent=JSON.parseO 查看详情

json对象与json字符串的转化json字符串与java对象的转换

Json对象与Json字符串的转化、JSON字符串与Java对象的转换一.Json对象与Json字符串的转化1.jQuery插件支持的转换方式:  $.parseJSON(jsonstr);//jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2.浏览器支持的转换方式(Firefox,chrom... 查看详情

java怎么读取json格式的数据

参考技术Ajava可以使用JSONObject和JSONArray来操作json对象和json数组,具体用法如下1:java对象与json串转换:java对象—json串:JSONObjectJSONStr=JSONObject.fromObject(object);Stringstr=JSONStr.toString();json串—java对象:JSONObjectjsonObject=JSONObject.fromObject... 查看详情