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 相关文章推荐
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
vue element el-transfer增加拖拽功能
Jan 15 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
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
js实现转动骰子模型
2019/10/24 Javascript
python操作sqlite的CRUD实例分析
2015/05/08 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
优秀技术工人先进材料
2014/02/17 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
承诺书模板
2014/08/30 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js