使用变量动态设置js的属性名_javascript技巧
程序员文章站
2022-03-19 11:41:25
...
目标:js的属性名可以使用变量
var object;
object.prop1 = "value1";
object.prop2 = "value2";
也可以采用如下方式:
object.push({prop1:"value1"});
object.push({prop2:"value2"});
在这里prop1 作为属性名称,可以直接用,也可以加上引号,比如:
object.push({"prop1":"value1"});
表达的含义都是一样的,也就是说,prop1只能作为常量被识别,即使它是个变量也没用,例如:
var prop1 = "prop2";
object.push({prop1:"value1"});
这样通过object访问prop2会出现什么情况呢?比如:
alert(object.prop2)
不用问,当然是undefined,而访问object.prop1却是"value1"
var arr=[];
arr['js']='jquery';
arr['css']='oocss';
var obj={};
for(var i in arr)
{
var arr=[];
arr['js']='jquery';
arr['css']='oocss';
var obj={};
for(var i in arr)
{
就是那么简单!把对象obj当成一个数组来对待,它支持使用类似于下标形式的方法来把属性和属性值赋给对象.但是,对象依然是对象,obj.length是不存在的.
举例:js对象object,当赋给该对象属性的时候可以采用以下方式
复制代码 代码如下:
var object;
object.prop1 = "value1";
object.prop2 = "value2";
也可以采用如下方式:
复制代码 代码如下:
object.push({prop1:"value1"});
object.push({prop2:"value2"});
在这里prop1 作为属性名称,可以直接用,也可以加上引号,比如:
复制代码 代码如下:
object.push({"prop1":"value1"});
表达的含义都是一样的,也就是说,prop1只能作为常量被识别,即使它是个变量也没用,例如:
复制代码 代码如下:
var prop1 = "prop2";
object.push({prop1:"value1"});
这样通过object访问prop2会出现什么情况呢?比如:
复制代码 代码如下:
alert(object.prop2)
不用问,当然是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学习笔记(17)------动态属性、复制变量值、传递参数和检测类型
-
使用js解决由border属性引起的div宽度问题_javascript技巧
-
js修改原型的属性使用介绍_javascript技巧
-
在js中使用"with"语句中跨frame的变量引用问题_javascript技巧
-
JS getAttribute和setAttribute(取得和设置属性)的使用介绍_javascript技巧
-
使用js解决由border属性引起的div宽度问题_javascript技巧
-
js 获取和设置css3 属性值的实现方法_javascript技巧
-
js使用DOM设置单选按钮、复选框及下拉菜单的方法_javascript技巧
-
JS getAttribute和setAttribute(取得和设置属性)的使用介绍_javascript技巧
-
js构造函数、索引数组和属性的实现方式和使用_javascript技巧