详解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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python重新加载模块的实现方法
2018/10/16 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
百年校庆节目主持词
2014/03/27 职场文书
新员工考核评语
2014/12/31 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python