使用变量动态设置js的属性名

目标: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是不存在的.

赞 (0)

相关推荐

  • 基于JavaScript 声明全局变量的三种方式详解

    JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量.该方式即为显式声明详细如下: <script> var test = 5;//全局变量 function a(){ var a = 3;//局部变量 alert(a); } function b(){ alert(test); } //a();//调用a方法,那么方法里面的内容才会执行 //b(

  • javascript中使用未定义变量或值的情况分析

    本文实例讲述了javascript中使用未定义变量或值的情况.分享给大家供大家参考,具体如下: javascript里面一般不能使用未定义的值,但是下面几种情况除外: 1. 赋值语句中: a=9; alert(a) //9 赋值语句中需要赋值的变量没定义会先定义,再赋值.另外从 a=b=c=8 不报错可以看出赋值语句是从右向左执行的. 2. for in语句中: for(key in {name:'goofy'}){ alert(key) //"name" } alert(key) /

  • JS判断变量是否为空判断是否null

    /** * 判断是否null * @param data */ function isNull(data){ return (data == "" || data == undefined || data == null) ? "暂无" : data; }

  • js变量以及其作用域详解

    一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: 复制代码 代码如下: i=100;//Number类型 i="variable";//String类型 i={x:4};//Object类型 i=[1,2,3];//Array类型 JS的这种特性虽然让我们的编码更加灵活,但也带来了一个弊端,不利于Debug,编译器的弱检测让我们维护冗长的

  • Js检查变量类型的代码()

    JavaScript检查变量的类型,并判断是整形或是字符串或是其它类型等等. 检查变量的类型 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2.toString 本来是用来做字符串转换的,不过现在流行用来做变量类型的检查了.舜子这里也写了一个函数,方便检查变量的类型,可以用来代替 typeof 复制代码 代码如下: function getType(o) { var _t; return ((_t = typeof(o)) == "object" ? o==null &a

  • js判断变量是否空值的代码

    复制代码 代码如下: function empty(v){ switch (typeof v){ case 'undefined' : return true; case 'string' : if(trim(v).length == 0) return true; break; case 'boolean' : if(!v) return true; break; case 'number' : if(0 === v) return true; break; case 'object' : i

  • js判断变量是否未定义的代码

    例如: if(!myVar01)alert("发生错误"); // 该代码直接发生异常,因为变量myVar01没有申明 if("undefined" == typeof myVar01)alert("发生错误"); // 这样写才不至于发生异常 而: var myVar01; if(undefined == myVar01)alert("发生错误"); // 该代码会正确运行 if("undefined"

  • 使用变量动态设置js的属性名

    目标:js的属性名可以使用变量 举例:js对象object,当赋给该对象属性的时候可以采用以下方式 复制代码 代码如下: var object; object.prop1 = "value1"; object.prop2 = "value2"; 也可以采用如下方式: 复制代码 代码如下: object.push({prop1:"value1"}); object.push({prop2:"value2"}); 在这里prop1

  • 小程序中使用css var变量(使js可以动态设置css样式属性)

    使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单. 基本用法 基础用法 <!--web开发中顶层变量的key名是:root,小程序使用page--> page { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; } .

  • VUE.js实现动态设置输入框disabled属性

    需求背景 页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue. 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为"只读". 代码样例 <el-input v-model="dataForm.account" placeholder="账号" v-bind:disabled="dataForm.id!=0"></el-input>

  • js对象属性名驼峰式转下划线的实例代码

    一.题目示例: 思路: 1.匹配属性名字符串中的大写字母和数字 2.通过匹配后的lastIndex属性获取匹配到的大写字母和数字的位置 3.判断大写字母的位置是否为首位置以及lastIndex是否为0,为0则表示匹配结束 4.将存放位置的数组进行从小到大排序,排序后将属性名按照字符串的slice方法切割并使用下划线重组 5.遍历对象的属性名并使用函数改变为新的命名,从新赋值到新的对象上(也可以使用改变对象的ES6新语法) 6.注意,每次在调用函数后,需要清空之前存放位置的数组 二.实现代码 le

  • 用JS动态设置CSS样式常见方法小结(推荐)

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

  • JS获取对象属性名总结

    最近面试遇到问如何获取对象全部属性名的方法,总结一下: 对象属性类型分类: 1.ESMAScript分类 数据类型 又分为可枚举和不可枚举类型 访问器类型 2.上下文分类 原型属性 实例属性 1.列举自身但不包括原型的可枚举属性名 Object.keys(obj) // 遍历对象 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.demo = function() {}; let c

  • vue.js动态设置VueComponent高度遇到的问题及解决

    目录 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 2.获取VueComponent标签生成的元素的高度 3.判断一个对象是jQuery对象还是DOM对象 vue动态获取.设置组件高度 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 <div v-for="data in list">     <div ref="abc">{{data.id}}</div> &

  • JS动态给对象添加属性和值的实现方法

    如下所示: var obj={}; for(var i=0;i<10;i++){ eval("obj.p"+i+"="+i); } 以上就是小编为大家带来的JS动态给对象添加属性和值的实现方法全部内容了,希望大家多多支持我们~

  • Java通过反射机制动态设置对象属性值的方法

    /** * MethodName: getReflection<br> * Description:解析respXML 在通过反射设置对象属性值 * User: liqijing * Date:2015-7-19下午12:42:55 * @param clzzName * @param respXML * @return * @throws ClassNotFoundException * @throws DocumentException * @throws IllegalArgumentE

  • js中动态创建json,动态为json添加属性、属性值的实例

    如下所示: var param = {}; for(var i=0;i<fields.length;i++){ var field = fields[i]; if(field.searchCondition != undefined && $('#search'+field.name).val() != ''){ param["search."+field.name]=$('#search'+field.name).val(); } } 在js中,一个[]认为是数

随机推荐