使用变量动态设置js的属性名


Posted in Javascript onOctober 19, 2014

目标:js的属性名可以使用变量

举例:js对象object,当赋给该对象属性的时候可以采用以下方式

var object; 

object.prop1 = "value1";

object.prop2 = "value2";

也可以采用如下方式:
object.push({prop1:"value1"});

object.push({prop2:"value2"});

在这里prop1 作为属性名称,可以直接用,也可以加上引号,比如:
object.push({"<span style="font-family: Arial, Helvetica, sans-serif;">prop1</span>":"value1"});

表达的含义都是一样的,也就是说,prop1只能作为常量被识别,即使它是个变量也没用,例如:
var prop1 = "prop2"; 

object.push({prop1:"<span style="font-family: Arial, Helvetica, sans-serif;">value1</span>"});

这样通过object访问prop2会出现什么情况呢?比如:
alert(<span style="font-family: Arial, Helvetica, sans-serif;">object.prop2) </span>

不用问,当然是undefined,而访问object.prop1却是"value1"

原因已经说过了,无论加不加引号,属性一律当成常量对待.再举一个例子:

var arr=[]; 

arr['js']='jquery'; 

arr['css']='oocss'; 

var obj={}; 

for(var i in arr) 

{
obj.i=arr[i]; 

} 

alert(obj.js);

读者不放猜一下alert会打印什么?

当然是undefined.

大家再猜一下,如果alert(obj.i)会打印什么?

当然是oocss,为什么?因为obj现在只有一个属性i,而且通过两次循环,obj.i前面的被后面的覆盖掉.

如果有需求,需要动态添加属性,也就是说,属性也必须是一个变量才行,如上例代码,alert(obj.js)不是undefined,而是jquery,该如何修改呢?

var arr=[]; 

arr['js']='jquery'; 

arr['css']='oocss'; 

var obj={}; 

for(var i in arr) 

{
obj[i]=arr[i]; 

} 

alert(obj.js);

就是那么简单!把对象obj当成一个数组来对待,它支持使用类似于下标形式的方法来把属性和属性值赋给对象.但是,对象依然是对象,obj.length是不存在的.
Javascript 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
AngularJS指令用法详解
Nov 02 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
vue.js todolist实现代码
Oct 29 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 #Javascript
js读取json的两种常用方法示例介绍
Oct 19 #Javascript
Jquery解析Json格式数据过程代码
Oct 17 #Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 #Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 #Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 #Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 #Javascript
You might like
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP count()函数讲解
2019/02/03 PHP
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
小试小程序云开发(小结)
2019/06/06 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python实现比较文件内容异同
2018/06/22 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python实现支付宝转账接口
2019/05/07 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
生产部经理岗位职责
2013/12/16 职场文书
学校火灾防控方案
2014/06/09 职场文书
人事专员岗位职责
2015/02/03 职场文书
父亲节活动总结
2015/02/12 职场文书
2015年共青团工作总结
2015/05/15 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
MSSQL基本语法操作
2022/04/11 SQL Server
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android