详解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 相关文章推荐
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
js验证表单第二部分
2006/11/25 Javascript
轻轻松松学习JavaScript
2007/02/25 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
简单讲解Python中的闭包
2015/08/11 Python
django实现前后台交互实例
2017/08/07 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
python中如何进行连乘计算
2020/05/28 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
linux面试题参考答案(9)
2016/01/29 面试题
创业计划书如何编写
2014/02/06 职场文书
个人授权委托书范本
2014/09/14 职场文书
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers