如何通过变量设置JS对象属性名称


177

我需要动态设置JS对象属性名称。

for(i=1; i<3; i++) {
    var key  = i+'name';

    data = {
        key : 'name1',
    }
}

结果应为:

data = {
    1name: 'name1'
    2name: 'name1'
}

如果它们是顺序的,为什么不使用数组?
epascarello

我想知道你们中的哪三个击错了箭头。来吧,狂欢。
查尔斯

Answers:


193
var jsonVariable = {};
for(var i=1; i < 3; i++) {
  jsonVariable[i + 'name'] = 'name' + i;        
}

4
在下面的Musa响应中,也正确地表明使用[]表示法实际上是唯一的方法。
Dennis Plucinik

1
另请注意,@ ChilNut在下面的回复现在描述了使用ES6进行此操作的最简单方法
rambossa

1
实际上,使用新语法,只有在循环限制为硬编码且较小的情况下,OP才能实现的目标。
穆萨

166

您必须使用[]符号来动态设置键。

var jsonVariable = {};
for(i=1; i<3; i++) {        
 var jsonKey  = i+'name';
 jsonVariable[jsonKey] = 'name1';

}

现在在ES6中,您可以使用对象文字语法动态创建对象键,只需将变量包装在 []

var key  = i + 'name';
data = {
    [key] : 'name1',
}

3
jsonVariable = {}; 不应在for循环内初始化。
关闭时间:

另外,您正在此处创建jsonVariable全局
Dennis Plucinik 2012年

129

使用ECMAScript 6,您可以将变量属性名称与对象文字语法一起使用,如下所示:

var keyName = 'myKey';
var obj = {
              [keyName]: 1
          };
obj.myKey;//1

在以下较新的浏览器中可以使用此语法:

Edge 12+(不支持IE),FF34 +,Chrome 44 +,Opera 31 +,Safari 7.1+

https://kangax.github.io/compat-table/es6/

您可以使用诸如babel之类编译器为旧版浏览器添加支持。如果您使用汇总Webpack等模块捆绑器,则很容易转换整个项目。


2
感谢您添加很棒的ES6语法
rambossa

没有ES6,我将无法定义var payload = {dynamicKey:val},我需要做var payload = {}和有效负载[variableName] = val。
Sainath SR

23

这是动态设置值的方法

var jsonVariable = {};
for (var i = 1; i < 3; i++) {
    var jsonKey = i + 'name';
    jsonVariable[jsonKey] = 'name' + i;
}


7

变量的来源无关紧要。我们要做的主要事情是...在方括号“ [..]”之间设置变量名称。

var optionName = 'nameA';
var JsonVar = {
[optionName] : 'some value'
}

效果很好,我想知道它是否适用于所有浏览器/版本
Mercury

1
jsonVariable = {}
for(i=1; i<3; i++) {        
   var jsonKey  = i+'name';
   jsonVariable[jsonKey] = 'name1'
}

这将类似于

    jsonVariable = {
    1name : 'name1'
    2name : 'name1'
}

0

遵循上述Sainath SR的评论,我可以通过定义对象,然后在对象外部定义另一个键/值,从Google Apps脚本(尚不支持ES6)中的变量设置js对象属性名称:

var salesperson = ...

var mailchimpInterests = { 
        "aGroupId": true,
    };

mailchimpInterests[salesperson] = true;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.