使用变量动态设置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 07 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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抽象工厂模式(Elgg)
2010/03/21 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
清空上传控件input file的值
2010/07/03 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
python实现备份目录的方法
2015/08/03 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
django中forms组件的使用与注意
2019/07/08 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Opencv求取连通区域重心实例
2020/06/04 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
中科前程Java笔试题
2016/11/20 面试题
创意婚礼策划方案
2014/05/18 职场文书
绿色环保口号
2014/06/12 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
安全生产先进个人总结
2015/02/15 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript