使用变量动态设置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 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
react中hook介绍以及使用教程
Dec 11 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
把77A收信机改造成收音机
2021/03/02 无线电
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
菜单效果
2006/10/14 Javascript
Code:findPosX 和 findPosY
2006/12/20 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python logging模块的使用详解
2020/10/23 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
保洁主管岗位职责
2013/11/20 职场文书
开业典礼主持词
2014/03/21 职场文书
捐款倡议书
2014/04/14 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书