使用变量动态设置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 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
微信小程序实现列表左右滑动
Nov 19 Javascript
JS中一些高效的魔法运算符总结
May 06 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创建动态图像
2006/10/09 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php商品对比功能代码分享
2015/09/24 PHP
php格式化时间戳
2016/12/17 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
Js apply方法详解
2017/02/16 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python @property的用法及含义全面解析
2018/02/01 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
会计专业毕业生自我鉴定
2013/10/29 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android