使用变量动态设置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 IE中的DOM ready应用技巧
Jul 23 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
jQuery聚合函数实例
May 21 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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实现redis数据库指定库号迁移的方法
2015/01/14 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
php5与php7的区别点总结
2019/10/11 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
jQuery的框架介绍
2016/05/11 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python装饰器使用实例详解
2019/12/14 Python
Python调用Windows命令打印文件
2020/02/07 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
行政总监岗位职责
2013/12/05 职场文书
银行门卫岗位职责
2013/12/29 职场文书
法律专业自荐信
2014/06/03 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
青岛导游词
2015/02/12 职场文书