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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
Vue实现简单的跑马灯
May 25 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
8个非常实用的Vue自定义指令
Dec 15 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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JavaScript中的面向对象介绍
2012/06/30 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python如何实现转换URL详解
2019/07/02 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
捷科时代的软件测试笔试题
2015/11/09 面试题
希特勒的演讲稿
2014/05/23 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python