使用变量动态设置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 相关文章推荐
JQuery从头学起第二讲
Jul 04 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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实现Mysql读写分离
2013/06/28 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
聊聊python中的循环遍历
2020/09/07 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Python修改DBF文件指定列
2020/12/19 Python
本科生详细的自我评价
2013/09/19 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
怎么写自荐书范文
2014/02/12 职场文书
奠基仪式主持词
2014/03/20 职场文书
中学生英语演讲稿
2014/04/26 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书