详解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 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
jQuery filter函数使用方法
May 19 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
JavaScript实现三级级联特效
Nov 05 Javascript
实用的Vue开发技巧
May 30 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
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
Stop SQL Server
2007/06/21 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
浅谈python写入大量文件的问题
2018/11/09 Python
用 Python 制作地球仪的方法
2020/04/24 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Python random模块的使用示例
2020/10/10 Python
PyQt实现计数器的方法示例
2021/01/18 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
什么是网络协议
2016/04/07 面试题
护理学毕业生求职信
2013/11/14 职场文书
测试工程师职业规划书
2014/02/06 职场文书
《颐和园》教学反思
2014/02/26 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
基于JavaScript实现省市联动效果
2021/06/22 Javascript