详解JavaScript中js对象与JSON格式字符串的相互转换


Posted in Javascript onFebruary 14, 2017

首先我们来看一下js中JSON格式的字符串

var JSONStr1 = "{\"name\" : \"张三\"}";

注意以下的写法不是js中JSON格式的字符串,它只是一个js的字符串。

var JSONStr2 = "{'name' : '张三'}";

我们看JSON语法中对于字符串的定义:是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。

下面我们来看一下在js中怎么把JSON格式的字符串转换成一个JS对象。(

var jsObj3 = eval("(" + JSONStr1 + ")");
var jsObj4 = JSON.parse(JSONStr1);

推荐使用第二种方式具体原因请参看:http://www.json.org.cn/resource/json-in-javascript.htm

此外提一句使用这两种方式转换后的js对象,应该是“一个符合JSON数据格式的js对象”,也就是说它的属性是带着引号的,这只是我的一种猜测,因为如果JSON格式的字符串如下表示:

var JSONStr1 = "{\"f[name]\" : \"张三\"}";

那么转换后的JS对象的属性必定要加上引号,因为js对象的属性不加引号只能使用字母,数字,下划线和$符号表示,使用其它符号属性就要加上引号了,所以说JS对象字面量表示法中属性加上引号是不会错的。另外如果JSON格式的字符串如上所示,那么转换后的js对象对f[name]取值就不能使用 jsObj4.f[name] 要用 jsObj4['f[name]'] ,因为有特殊字符,这点要注意了。对于我的猜测,读者要有异议,可以提给我。

我们再来看看在js中js对象与JSON格式字符串的转换。下面我准备了几组js对象加以说明:

<input type="button" value="测试按钮1" onclick="testJson();"/>

<script type="text/javascript">
  //(1) 这是一个js对象
  var jsObj1 = {
    name : "张三"
  }
  //(2)这是一个内部带有方法js对象。
  var jsObj2 = {
    name : "张三",
    func : function(){
      alert("hello");
    }
  }
  //(3)这是一个符合JSON数据格式的js对象
  var jsonObj = {
    "name" : "张三",
    "age" : 10,
    "remark" : {"high" :170,"address" : "beijingshi"}
  }
  // js数组对象
  var jsArray = [
    {name : "张三"},
    {"age" : 10}
  ]

  function testJson(){

    var JSONstr1 = JSON.stringify(jsObj1);
    var JSONstr2 = JSON.stringify(jsObj2);
    var JSONstr3 = JSON.stringify(jsonObj);
    var JSONstr4 = JSON.stringify(jsArray);
    alert(JSONstr1);
    alert(JSONstr2);
    alert(JSONstr3);
    alert(JSONstr4);

  }

看一下弹框的内容:

               (1)

                                  (2)                                      

详解JavaScript中js对象与JSON格式字符串的相互转换                  详解JavaScript中js对象与JSON格式字符串的相互转换

                      (3)

                                                         

(4)

详解JavaScript中js对象与JSON格式字符串的相互转换详解JavaScript中js对象与JSON格式字符串的相互转换 

其中 (1)、(3)、(4)的执行结果说明,JSON解析器的stringify()函数对于js对象是fou符合JSON格式是不加限定,都可以把js对象转换成JSON格式字符串。

(2)的执行结果说明,js对象中如果没有JSON表示的值(比如函数和undefined)将会被排除。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
javascript验证身份证号
Mar 03 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
详解vue中axios的封装
Jul 18 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 #Javascript
用file标签实现多图文件上传预览
Feb 14 #Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 #Javascript
javascript中BOM基础知识总结
Feb 14 #Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 #Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 #Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 #Javascript
You might like
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
php常用数组函数实例小结
2016/12/29 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python3 log10()函数简单用法
2019/02/19 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
物业保安员岗位职责
2014/03/14 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
什么是SOLID
2022/03/24 Javascript