详解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中的107个基础知识收集整理 推荐
Mar 29 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
js实现点赞按钮功能的实例代码
Mar 06 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初学者头疼十四条问题大总结
2008/11/12 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
angular.bind使用心得
2015/10/26 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
利用python求相邻数的方法示例
2017/08/18 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
社区端午节活动方案
2014/01/28 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
领导欢迎词范文
2015/01/26 职场文书
倡议书范文大全
2015/04/28 职场文书
八一建军节主持词
2015/07/01 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Python实战之OpenCV实现猫脸检测
2021/06/26 Python