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

 更新时间:2014年10月19日 11:25:29   投稿:whsnow  
js的属性名可以使用变量,例如js对象object,当赋给该对象属性的时候可以采用以下方式,比较实用,需要的朋友可以看看

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

相关文章

  • vue-router重定向不刷新问题的解决

    vue-router重定向不刷新问题的解决

    本篇文章主要介绍了vue-router重定向不刷新问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • JavaScript深拷贝与浅拷贝原理深入探究

    JavaScript深拷贝与浅拷贝原理深入探究

    深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,这篇文章主要给大家介绍了关于js深拷贝和浅拷贝的相关资料,需要的朋友可以参考下
    2022-10-10
  • 7个你应该知道的JS原生错误类型

    7个你应该知道的JS原生错误类型

    这篇文章主要介绍了7个你应该知道的JS原生错误类型,对此感兴趣的同学,可以参考一下
    2021-04-04
  • js 性能优化之算法和流程控制

    js 性能优化之算法和流程控制

    循环处理是最常见的编程模式之一,也是提升性能必须关注的要点之一。本文将对此进行介绍。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS 60秒后重新发送验证码的实例讲解

    JS 60秒后重新发送验证码的实例讲解

    下面小编就为大家带来一篇JS 60秒后重新发送验证码的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • trackingjs+websocket+百度人脸识别API实现人脸签到

    trackingjs+websocket+百度人脸识别API实现人脸签到

    这篇文章主要介为大家详细绍了trackingjs+websocket+百度人脸识别API实现人脸签到功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • TypeScript接口与泛型全面精讲

    TypeScript接口与泛型全面精讲

    接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法,泛型是静态类型语言的基本特征,允许将类型作为参数传递给另一个类型、函数、或者其他结构
    2022-10-10
  • 超好玩js页面效果之实现数值的动态变化

    超好玩js页面效果之实现数值的动态变化

    这篇文章主要给大家介绍了关于超好玩js页面效果之实现数值的动态变化的相关资料,文中通过示例代码及图文介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
    2022-10-10
  • JS 实现微信扫一扫功能

    JS 实现微信扫一扫功能

    这篇文章主要介绍了JS 实现微信扫一扫功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • JS JSON对象转为字符串的简单实现方法

    JS JSON对象转为字符串的简单实现方法

    这篇文章主要介绍了JS中JSON对象转为字符串的简单实现方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11

最新评论