使用变量动态设置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 相关文章推荐
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 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增删改查示例自己写的demo
2013/09/04 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
javascript常用功能汇总
2015/07/05 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
详解Python装饰器由浅入深
2016/12/09 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python 实现客户端与服务端的通信
2020/12/23 Python
为数据库创建索引都需要注意些什么
2012/07/17 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
网络宣传方案
2014/03/15 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
健康状况证明模板
2014/10/23 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
初中历史教学反思
2016/02/19 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
python数字图像处理:图像的绘制
2022/06/28 Python