JavaScript对象和字串之间的转换实例探讨


Posted in Javascript onApril 21, 2013

JavaScript 对象定义方式
1. var obj = new Object()

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
<script> 
var obj = new Object(); 
obj.key = "11"; 
alert(obj.key); 
</script> 
</HEAD> 
<BODY> 
</BODY> 
</HTML>

2. var obj = {};
<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
<script> 
var obj = {}; 
obj.key = "11"; 
alert(obj.key); 
</script> 
</HEAD> 
<BODY> 
</BODY> 
</HTML>

也可以在定义时初始化值:
var obj = {key:'11'};
对象如何转换成string
如果直接使用 :
obj.toString()

得到的是 [object,object] 这样的字串。
从上面的第二种定义方式 (var obj = {key:'11'};) 可以看出, js 的对象对应的字串类是一对大括号里包着一批键值对的方式。

其实就是JSON的数据格式, 不了解的可以学学json 格式。
使用以下方式就可以取出obj 的key 和value了。

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
<script> 
var obj = {attr1:'value1',attr2:'value2'}; 
for(attr in obj) 
{ 
alert(attr); 
alert(eval("obj."+attr)); 
} 
</script> 
</HEAD> 
<BODY> 
</BODY> 
</HTML>

重点说一下为什么取值使用:
eval("obj."+attr);

而不是直接使用
obj.attr

因为 obj.attr 找到的 obj 中key 值为attr 的value , 但是obj 中并没有attr 的key 值。
这里的attr 是一个变量。 所以 就要借助于eval 的方式了。

String 如何转换为对象
从对象的格式可以看出,如果字串的格式定义成 json 格式的, 就可以直接转换为obj了。
比较以下以下两种的方式:

var obj1 = {attr1:'value1',attr2:'value2'}; 
var obj2 = "{attr1:'value1',attr2:'value2'}";

obj1 直接是一个对象, obj2 只是一个字串。
使用eval(obj2) 就可以转换为对象了。

为什么会有这种用法: 因为很多时候,我们会从服务端返回这种字串供前端处理。

Javascript 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
jquery事件与绑定事件
Mar 16 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 #Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 #Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 #Javascript
jQuery获取注册信息并提示实现代码
Apr 21 #Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 #Javascript
jQuery模拟超链接点击效果代码
Apr 21 #Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 #Javascript
You might like
php生成N个不重复的随机数实例
2013/11/12 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
原生js实现日期联动
2015/01/12 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
React之PureComponent的使用作用
2018/07/10 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
js实现批量删除功能
2020/08/27 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Python 处理图片像素点的实例
2019/01/08 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
建筑设计师岗位职责
2013/11/18 职场文书
团员的自我评价
2013/12/01 职场文书
小学校本培训方案
2014/06/06 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
教师工作表现评语
2014/12/31 职场文书
婚宴父亲致辞
2015/07/27 职场文书
办公室日常管理制度
2015/08/04 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
Go语言入门exec的基本使用
2022/05/20 Golang