使用变量动态设置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代码通俗易懂(自写)
Jun 19 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
Vue组件中slot的用法
Jan 30 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
使用js 设置url参数
2013/07/08 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
对于Python装饰器使用的一些建议
2015/06/03 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
浅析Python四种数据类型
2018/09/26 Python
python实现复制大量文件功能
2019/08/31 Python
学习Python需要哪些工具
2020/09/04 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
人民调解协议书范本
2014/10/11 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
六年级作文之关于梦
2019/10/22 职场文书
Golang解析JSON对象
2022/04/30 Golang
ant design charts 获取后端接口数据展示
2022/05/25 Javascript