使用变量动态设置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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
详解Vue的options
May 15 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
Smarty模板快速入门
2007/01/04 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
动态控制Table的js代码
2007/03/07 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
使用python编写监听端
2018/04/12 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python使用贪婪算法解决问题
2019/10/22 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
如何强制垃圾回收
2015/10/06 面试题
小学六年级学生评语
2014/04/22 职场文书
环保倡议书怎么写
2014/05/16 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
入党推优材料
2014/06/02 职场文书
教室标语大全
2014/06/21 职场文书
工作说明书格式
2014/07/29 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
pt-archiver 主键自增
2022/04/26 MySQL
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android