详解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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Python实现二分法算法实例
2015/02/02 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python 5个顶级异步框架推荐
2020/09/09 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
安全横幅标语
2014/06/09 职场文书
社区清明节活动总结
2014/07/04 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
新兵入伍决心书
2015/09/22 职场文书
公司年会主持词范文!
2019/05/07 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python