详解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中的连字符详解
Nov 28 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
实用函数5
2007/11/08 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
使用python实现滑动验证码功能
2019/08/05 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
在职人员函授期间自我评价分享
2013/11/08 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python
Go gorilla/sessions库安装使用
2022/08/14 Golang