使用变量动态设置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 Dialog 实践分享
Oct 22 Javascript
Bootstrap基础学习
Jun 16 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
开启BootStrap学习之旅
May 04 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
简单的三步vuex入门
May 20 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
javascript实现简易计算器功能
Sep 23 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 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
深入apache host的配置详解
2013/06/09 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php简单实现MVC
2015/02/05 PHP
php简单中奖算法(实例)
2017/08/15 PHP
jquery显示和隐藏div特效实例
2013/02/27 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
Python 绘图和可视化详细介绍
2017/02/11 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
python 实现波浪滤镜特效
2020/12/02 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
2014年情人节活动方案
2014/02/16 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
卖车协议书范例
2014/09/16 职场文书
校友回访母校寄语
2015/02/26 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python