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 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
创建一个类Person的简单实例
May 17 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
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
安装docker和docker-compose实例详解
2019/07/30 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
2014年学生管理工作总结
2014/12/20 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
vue实现锚点定位功能
2021/06/29 Vue.js
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python