js中json对象和字符串的理解及相互转化操作实现方法


Posted in Javascript onSeptember 22, 2017

本文实例讲述了js中json对象和字符串的理解及相互转化操作实现方法。分享给大家供大家参考,具体如下:

<script>
 var str="{'strv':["+
       "{'a':'a11'},"+
       " {'a':'b222'}"+
     " ]}";
 //如果放在一行更清楚:var str="{'strv':[{'a':'a11'}, {'a':'b222'} ]}";
 var str2=eval('('+str+')');
// alert(str2.strv[1].a);
 var jsonob={'jsonv':[
         {'j':'j111'},
         {'j':'j222'}
       ]};
//如果放在一行更清楚:var jsonob={'jsonv':[ {'j':'j111'}, {'j':'j222'} ]};
// alert(jsonob.jsonv[1].j);
 /*
var  str="{'strv':[{'a':'a11'}, {'a':'b222'} ]}";
var jsonob={'jsonv':[ {'j':'j111'}, {'j':'j222'} ]};
这样我们可以看出json对象和字符串是不一样的!
字符串就是字符串,json对象是一个对象。
虽然其内容都是我们看到的json格式,但是两者是有区别的。
我们想取出其中某个属性的值,其实是对json对象操作的(你能取出对象的属性值,但不能取出字符串的属性值,字符串没属性。)。
所以如果你拿到的是对象,那你就直接可以取值了,
例如jsonob.jsonv[1].j。
如果你拿到的是字符串,那你必须先转化成对象才可以取值,
字符串转对象有几种方法,js本身自带的是var str2=eval('('+str+')');
这里的str2就是对象了。如果你引入了json.js文件,还可以使用其中的
方法,这些都已经封装好了。
总结:json只是一种格式。符合这种格式的可以是json对象,也可以是字符串。
要取属性值只能从对象里取。所以需要两者的转化。
js自带的转化方法:
 字符串转成json对象:
   var str="{'strv':[{'a':'a11'}, {'a':'b222'} ]}";//字符串
   var jsonObject=eval('('+str+')');//json对象
 json对象转成字符串:
   js本身没有这样的方法,你需要自己写这样的方法,才能转化。
从上可知,js本身只可以将字符串转成json对象,
但不可以将json对象转成字符串。其实我们可以用
json.js里的方法,而且更简单。这时你要引入json.js文件。
json.js里的方法:
 字符串转成json对象:
     var str="{'strv':[{'a':'a11'}, {'a':'b222'} ]}";//字符串
  转成json对象方法1: var myJSONObject1=str.parseJSON();
  转成json对象方法2: var myJSONObject2=JSON.parse(str);
 json对象转成字符串:
     var jsonob={'jsonv':[ {'j':'j111'}, {'j':'j222'} ]};//json对象
  转成字符串方法1:var mystr1=jsonob.toJSONString();
  转成字符串方法2: var mystr2=JSON.stringify(jsonob);
 */
</script>

通过实验,我们应该明白,json其实是一种格式,js本身支持这种格式,

所以你不需要引入json.js就可以使用json对象。我们一般会引入json.js因为这里面封装了json对象和字符串转化的方法,方便我们使用(当然还有其他方法)。

通过本例我们更好地理解json对象和字符串之间的区别。

Javascript 相关文章推荐
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
利用javascript如何随机生成一定位数的密码
Sep 22 #Javascript
ES6中新增的Object.assign()方法详解
Sep 22 #Javascript
Vee-Validate的使用方法详解
Sep 22 #Javascript
Js中async/await的执行顺序详解
Sep 22 #Javascript
Node.js自定义实现文件路由功能
Sep 22 #Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 #Javascript
javascript计算渐变颜色的实例
Sep 22 #Javascript
You might like
中英文字符串翻转函数
2008/12/09 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
八一建军节部队活动方案
2014/02/04 职场文书
新年寄语2016
2015/08/17 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
python的变量和简单数字类型详解
2021/09/15 Python