使用变量动态设置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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
js实现简单计算器
Nov 22 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
JS模拟多线程
2007/02/07 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
Bootstrap基础学习
2015/06/16 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
React事件处理的机制及原理
2018/12/03 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
js实现录音上传功能
2019/11/22 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
一个基于flask的web应用诞生(1)
2017/04/11 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
人事专员职责
2014/02/22 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
利用python调用摄像头的实例分析
2021/06/07 Python
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android