位置: IT常识 - 正文

37.JavaScript对象与JSON格式的转换,JSON.stringify、JSON.parse方法的使用方法和注意事项

编辑:rootadmin
37.JavaScript对象与JSON格式的转换,JSON.stringify、JSON.parse方法的使用方法和注意事项

推荐整理分享37.JavaScript对象与JSON格式的转换,JSON.stringify、JSON.parse方法的使用方法和注意事项,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

文章目录JSON处理JSON.stringifystringify的限制排除和替换映射函数格式化使用的空格数量自定义toJSON方法JSON.parse使用reviver总结JSON处理

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

JSON.stringify

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

JSON.stringify将对象转为JSON字符串;JSON.parse将JSON字符串转为对象;

例如,我们把一个对象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)方法会返回该对象obj的JSON字符串数据,这个转换的过程可以称作JSON编码(JSON-encoded)、序列化(serialized),亦或者编组化(marshalled)。当对象转为普通的字符串后,我们就可以以普通数据的格式存储、传递这些数据。

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

注意:

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

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

包括:

对象方法;Symbol类型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 = sonson.father = fatherJSON.stringify(father)

代码执行结果:

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

排除和替换

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

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

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

参数解读:

obj:要编码的对象replacer:要编码的属性数组或者映射函数function(k,v)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;}))37.JavaScript对象与JSON格式的转换,JSON.stringify、JSON.parse方法的使用方法和注意事项

代码执行结果如下:

由于值为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])

str 要解析的 JSON 字符串。

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() ); // 正常运行了!总结JSON是一种数据格式,有独立的标准和大多数编程语言的支持JSON支持Object、array、string、number、boolean和nullJSON.stringifyJSON.parse
本文链接地址:https://www.jiuchutong.com/zhishi/300415.html 转载请保留说明!

上一篇:AI遮天传 NLP-词表示(遮天传官网)

下一篇:JS实现轮播图(一看就懂逻辑清晰)(js轮播图视频教程)

  • 怎么知道qq好友有没有删除自己(怎么知道qq好友把你删了)

    怎么知道qq好友有没有删除自己(怎么知道qq好友把你删了)

  • 电脑任务管理器在哪里(电脑任务管理器快捷键ctrl+alt+)

    电脑任务管理器在哪里(电脑任务管理器快捷键ctrl+alt+)

  • 微信文件传输助手怎么删除(微信文件传输助手是真人吗)

    微信文件传输助手怎么删除(微信文件传输助手是真人吗)

  • 电脑文件夹里的图片怎么按自己的需要排序(电脑文件夹里的文件怎么调整顺序)

    电脑文件夹里的图片怎么按自己的需要排序(电脑文件夹里的文件怎么调整顺序)

  • 微信运动看不到好友步数以前的还能看到(微信运动看不到某个人的运动记录)

    微信运动看不到好友步数以前的还能看到(微信运动看不到某个人的运动记录)

  • 微信可以传文件夹吗(微信可以传文件给其他人吗)

    微信可以传文件夹吗(微信可以传文件给其他人吗)

  • 关联qq却看不到消息(关联qq却看不到好友动态)

    关联qq却看不到消息(关联qq却看不到好友动态)

  • 淘宝卖家手机版是什么软件(淘宝卖家手机版下载)

    淘宝卖家手机版是什么软件(淘宝卖家手机版下载)

  • 荣耀v10插内存卡会变慢吗(荣耀v10插内存卡在哪里)

    荣耀v10插内存卡会变慢吗(荣耀v10插内存卡在哪里)

  • 剪映9:16比例为什么还是原屏呢(剪映里比例原则9比16后不是横视频)

    剪映9:16比例为什么还是原屏呢(剪映里比例原则9比16后不是横视频)

  • qq建立基友关系是什么意思(qq建立基友关系有啥用)

    qq建立基友关系是什么意思(qq建立基友关系有啥用)

  • soul聊天框删了对方还有吗(soul上删掉的聊天框)

    soul聊天框删了对方还有吗(soul上删掉的聊天框)

  • vue音乐怎么添加本地音乐(vue怎么添加音乐)

    vue音乐怎么添加本地音乐(vue怎么添加音乐)

  • realmex有nfc么(realmex手机nfc功能在哪里)

    realmex有nfc么(realmex手机nfc功能在哪里)

  • set协议的优缺点(set协议的优缺点简答)

    set协议的优缺点(set协议的优缺点简答)

  • 淘宝开店电脑端描述怎么写(淘宝开店电脑端和手机端是一样的吗)

    淘宝开店电脑端描述怎么写(淘宝开店电脑端和手机端是一样的吗)

  • 苹果xr待机多长时间(苹果xr待机多长时间正常)

    苹果xr待机多长时间(苹果xr待机多长时间正常)

  • 怎样修改qq密码(怎样修改qq密码和帐号)

    怎样修改qq密码(怎样修改qq密码和帐号)

  • 2.4g能跑满100m吗(2.4g能达到100m吗)

    2.4g能跑满100m吗(2.4g能达到100m吗)

  • 自主访问是什么意思(自主访问直接访问)

    自主访问是什么意思(自主访问直接访问)

  • 淘金币签到在哪里(淘金币签到提醒怎么打开)

    淘金币签到在哪里(淘金币签到提醒怎么打开)

  • 电脑蓝屏0x000007f(电脑蓝屏0X0000007E是怎么回事)

    电脑蓝屏0x000007f(电脑蓝屏0X0000007E是怎么回事)

  • 京豆如何使用(京豆如何使用方法)

    京豆如何使用(京豆如何使用方法)

  • 如何更新PC端微信版本?(pc端微信怎么更新)

    如何更新PC端微信版本?(pc端微信怎么更新)

  • 计算机视觉学习笔记(图像的灰度与灰度级 图像的深度 图像噪声 图像处理)(计算机视觉技术的应用)

    计算机视觉学习笔记(图像的灰度与灰度级 图像的深度 图像噪声 图像处理)(计算机视觉技术的应用)

  • 简易计税是什么税种
  • 工会经费和福利费怎么花
  • 企业缴纳季度所得税
  • 材料卸车费包含在哪里
  • 起重机属于固定资产哪个类别
  • 展会补贴收入会计处理
  • 可以先抵扣下个月的进项票吗
  • 专票多少钱
  • 企业残疾金的基数是多少
  • 股东在两个公司上班好吗
  • 个体户购买社保和自由人购买社保区别
  • 资本金可以出借吗
  • 小规模纳税人销售已使用固定资产
  • 建筑业农民工工资
  • 股票属于现金及股票吗
  • 调离工作岗位是什么处分
  • 关联企业税收
  • 报关单出口退税联模板
  • 未取得发票怎么做纳税调增操作
  • 预提厂房租金
  • 其他货币资金怎么做账
  • 电子发票怎么打成A4纸一半
  • 电脑维修中常用的软件
  • linux acl配置命令
  • thinkphp获取数据库数据
  • dns进程
  • windows 10月更新
  • PHP:oci_field_type()的用法_Oracle函数
  • 领用配件计入什么科目
  • 应收账款怎么做分录
  • 非货币性资产投资的会计处理
  • 服装制造业现状和发展趋势
  • 发票抵税是怎么申报的
  • 夜间潜水时发现水体
  • phptime函数
  • 固定资产修理支出准予扣除吗
  • 简易办法征收增值税政策的通知
  • cobit框架
  • 特征提取原理
  • 公司间代收代付
  • 本期应纳税额减征额怎么算
  • 营业执照更换法人需要哪些手续
  • 什么样的资产可以执行
  • MySQL数据库有什么特点
  • wordpress 自动生成文章
  • mongodb优点
  • 工伤保险如何认定
  • 出口退税中的免税是什么
  • 发票含税和不含税的区别
  • 工商企业年报网上申报流程
  • 城建税退税流程
  • 根据sql脚本修改数据类型
  • 专用发票的用途
  • 记账凭证粘贴顺序银行回单
  • 房地产项目公司组织架构
  • 会计已入账是什么意思
  • 收到暂估跨年发票怎么办
  • 会计的三个结转是什么
  • 设备投入安装会计分录怎么写
  • 滞纳金是罚款支出吗
  • 退回的企业所得税计入什么科目
  • 电子口岸登录显示证书错误
  • mysql的操作
  • sql事务处理
  • 深入理解mysql主从原理32讲
  • windows如何设置pin码
  • window系统怎么查看
  • 手动GHOST安装系统方法教程图解
  • centos部署tomcat配置
  • 怎么备份和恢复goodnotes中的数据
  • 高效快捷键
  • windows7可以打开多个窗口
  • mac os 必装软件
  • js运算符种类
  • 利用css样式控制文本的字体属性是什么
  • linux终端命令行和输出在一行
  • js函数function用法
  • 福建电子税务局社保缴费操作
  • 农村饮水扶持资金申请报告
  • todesk点不了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设