`

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

 
阅读更多
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是不存在的. 
分享到:
评论

相关推荐

    js动态引入外部js脚本并获取里面的变量值.pdf

    例如,假设我们有一个名为`new.js`的外部脚本,其中定义了一个变量`poiObj`,我们可以这样使用`$.getScript()`来加载这个脚本并获取其变量值: ```javascript $.getScript('new.js', function() { // 当new.js加载...

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

    在微信小程序中,CSS变量的使用提供了一种动态管理样式的机制,使得JavaScript可以间接修改CSS样式。在小程序中直接修改样式较为复杂,因为小程序的原生组件不支持CSS的语法,但通过CSS变量,我们可以解决这个问题。...

    thinkphp5 js中显示php变量.docx

    此函数在模板中的使用格式通常为 `{:U('模块/控制器/方法', ['参数名' =&gt; '参数值'])}`。例如: ```php ('User/Index/index')}"&gt;首页 ``` 这段代码将生成一个链接,其 URL 地址指向 `User` 模块下的 `Index` 控制...

    Sassmixin准备切换到使用CSS自定义属性又名CSS变量

    使用`var()`函数,你可以引用这些变量,它们可以在运行时动态改变,提高了灵活性。CSS变量可以应用于整个页面或者特定的元素,甚至可以继承到子元素,这使得它们在组件化开发中特别实用。 转换从Sass mixin到CSS...

    react-reactcssvariables一个用于设置CSS变量的React组件

    标题提到的 "react-reactcssvariables" 是一个专门为 React 开发的组件,它允许开发者在 React 组件中方便地设置和使用 CSS 变量。这个组件可能通过提供一个简单的 API,让开发者可以在组件级别定义、更改和传播 CSS...

    js把字符串转换成变量

    在JavaScript(JS)中,将字符串转换为变量是一项常见的任务,尤其在动态编程或处理用户输入时。在JavaScript中,有几种方法可以实现这个目标,主要涉及到`eval()`函数、`window[]`对象以及`new Function()`构造函数...

    JS变量问题详解

    在JavaScript中,全局变量是全局对象的属性,对于浏览器环境中的全局对象是window。全局变量的生命周期等于整个程序的运行时间,这可以导致内存泄漏和其他问题,因此要避免滥用全局变量。 在变量的作用域中,存在一...

    js变量利用ajax转php变量

    1. **JavaScript(JS)变量**:JavaScript是一种轻量级的解释型编程语言,主要运行在浏览器中,用于处理用户交互、网页动态效果和数据验证。变量在JS中用`var`、`let`或`const`声明,它们可以存储各种数据类型,如...

    kettle动态设置输入文件路径

    - **Step属性**:在输入步骤(如文本文件输入)的配置中,找到“文件名”字段,选择“变量”或“参数”选项,并输入相应的变量名或参数名。 - **Job和Transformation的变量**:在Job中可以创建和赋值变量,...

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

    这里我们使用方括号([])语法来添加属性,这种方式允许我们使用变量作为属性名: ```javascript var obj = {}; // 创建一个空对象 var keyName = 'myKey'; // 定义要添加的属性名 var keyValue = 'myValue'; // ...

    js变量作用域

    例如,如果在一个脚本文件或全局作用域中声明了一个变量,没有使用`var`、`let`或`const`关键词,则该变量会成为`window`对象的一个属性。这种变量在整个程序中都可以被访问到。 **示例代码**: ```javascript var ...

    javascript变量和函数

    通常,`type`属性设置为`text/javascript`,而`src`属性用于引用外部的JS文件。至于脚本的位置,通常建议将其放在`&lt;body&gt;`标签的底部,以确保在执行脚本前,HTML文档已经完全加载,这样可以避免在脚本执行时元素尚未...

    JavaScript变量

    - **无需类型声明**:由于JavaScript是一种动态类型的语言,因此变量的类型可以在运行时确定,无需在声明时指定类型。 ```javascript var age = 25; // 整型 var name = "John"; // 字符串 ``` - **赋值类型...

    JavaScript声明全局变量访问方法

    - **使用`window`对象**:在浏览器环境中,全局变量实质上是`window`对象的属性,可以通过`window.variableName`访问。 ```javascript console.log(window.globalVar); // 输出:"我是全局变量" ``` 5. **最佳...

    js delete 用法(删除对象属性及变量)

    在JavaScript中,`delete`运算符主要用于删除对象的属性,而不是变量。让我们深入探讨`delete`的用法、限制以及其在不同情况下的行为。 ### 1. 删除对象属性 `delete`运算符用于从对象中删除一个属性。在示例1中:...

    JS如何定义用字符串拼接的变量

    在JavaScript中,有时候我们需要动态地创建变量,尤其是当变量名基于某些条件或参数时。例如,在上述场景中,我们可能需要生成一系列以`date_`为前缀,后跟一个数字的变量。在这种情况下,直接使用`var "test_" + ...

    nodejs全局安装位置 、设置环境变量相关说明

    Node.js 的全局安装位置和环境变量设置是非常重要的,正确地设置这些变量可以使得 Node.js 和其它相关工具更加易于使用。本文详细介绍了 Node.js 的安装、设置全局安装位置和环境变量的过程,希望对读者有所帮助。

Global site tag (gtag.js) - Google Analytics