详解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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
微信小程序 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面向对象全攻略 (七) 继承性
2009/09/30 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php blowfish加密解密算法
2016/07/02 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
js简单抽奖代码
2015/01/16 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
Python获取网页上图片下载地址的方法
2015/03/11 Python
python 系统调用的实例详解
2017/07/11 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
浅析python的优势和不足之处
2018/11/20 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
python 遍历pd.Series的index和value
2019/11/26 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
员工晚婚的请假条
2014/02/08 职场文书
协议书样本
2014/04/23 职场文书
公司募捐倡议书
2014/05/14 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
投资入股合作协议书
2014/10/28 职场文书