使用变量动态设置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 字符串连接性能优化
Dec 20 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
vue获取form表单的值示例
Oct 29 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python 消费 kafka 数据教程
2019/12/21 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
一套VC试题
2015/01/23 面试题
港湾网络笔试题
2014/04/19 面试题
质检部部长职责
2013/12/16 职场文书
中秋节超市促销方案
2014/01/30 职场文书
技能比赛获奖感言
2014/02/14 职场文书
工作评语大全
2014/04/26 职场文书
电子商务专业自荐信
2014/06/02 职场文书
2014年车间工作总结
2014/11/21 职场文书
环境建议书
2015/02/04 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL