使用变量动态设置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 getElementsByName()的用法说明
Jul 31 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
浅谈JS的原型和原型链
Jun 04 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未登录自动跳转到登录页面
2016/12/21 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
python用户管理系统的实例讲解
2017/12/23 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
jupyter notebook 重装教程
2020/04/16 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python基于openpyxl生成excel文件
2020/12/23 Python
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
房产公证书范本
2014/04/10 职场文书
人才市场接收函
2015/01/30 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python