JavaScript 对象声明语法 - 变量名作为属性答案

【问题标题】：JavaScript object declaration syntax - variable names as propertiesJavaScript 对象声明语法 - 变量名作为属性
【发布时间】：2012-09-26 18:09:54
【问题描述】：

JavaScript 为您提供了许多声明对象的方法。当您手头有大部分可用数据时，最方便的（在我看来）如下：

var person = {
    name: 'John',
    age: 23
}; // "object literal syntax"

这种语法的一个奇怪之处在于它与此相同：

var person = {
    'name': 'John',
    'age': 23
}; // "object literal syntax"

也就是说，您可以在属性名称中使用引号或省略它们。

将其与设置单个属性的工作方式进行比较时，您有两种选择：

person.birthday = "January 12"; // "dot syntax"

或

person['birthday'] = "January 12"; // "array syntax"

“点语法”仅在右操作数是实际属性名称时才有效。如果要使用变量作为属性名称，则必须使用“数组语法”，即：

var prop = "birthday";
person[prop] = "January 12";

现在，是否可以在“对象文字语法”中为属性名称使用变量？由于引用属性名称并不重要，因此似乎没有一种明显的方法可以在那里使用变量。我正在寻找这样的东西：

var prop = "birthday";
var person = {
    name: 'John',
    age: 23,
    (prop): 'January 12'
};

这里我使用 (prop) 作为假想的语法来表示这是一个变量而不是文字字符串。

谢谢。

【问题讨论】：

我认为你必须坚持使用数组语法。也许 eval('person.'+prop+' = "January 12"') 可以解决问题，但我不认为这是最优解
@PhilippeBoissonneault -- 确认！ 不需要 eval...请不要在这种情况下使用它。
您正在寻找相当于 PHP 变量的变量：$foo = bar; $bar = '123'; echo $$foo;// actually displays '123'
Using a variable for a Javascript object key 的可能重复项

标签： javascript object syntax

【解决方案1】：

不，这不起作用，这就是为什么如果您动态设置属性名称，建议并使用类似数组的表示法。

var k='propertyname';
object[k]="value";

这在使用点表示法从变量中设置索引或属性名称时有效。

【讨论】：

我相信短语 bracket notation 是首选，否则，是的。

【解决方案2】：

ES6 现在允许这样做：

var obj = {
  [prop]: 'value'
};

【讨论】：

【解决方案3】：

对于需要替换点语法的人，其中键是对象而不是字符串（例如嵌套在父对象中），这里有一些解决方法：

var developers = {
    person: {
        'name': 'John',
        'age': 23
    },
    anarchist: (function(){ var a = {};
        a['name'] = 'John';
        a['age'] = 23;
        a[false] = false;
        a[1] = 1;
        a[window] = window;
    return a; })(),
    conformist: _.object([
        ['name', 'John'],
        ['age', 23],
        [false, false],
        [1, 1],
        [window, window]
    ])
};

// console.log(developers); // <- to see var dump in Firebug

anarchist 元素使用self-executing-function 来在调用后收集垃圾，而conformist 元素使用_.object() 函数（如果您可以在您的站点中包含 underscore.js）。

我希望内置的 Object() 和 Array() 函数允许像 underscore.js 那样传递键和值:-)

【讨论】：

减少自调用函数是我的首选解决方案 +1

【解决方案4】：

您不能对对象执行此操作，但如果您考虑改用构造函数，它可能看起来像这样：

var prop = "birthday";
var Person = function() {
    this.name = "Bob";
    this[prop] = "January 12";
};
var bob = new Person();

当然你这里还有数组符号，但也许你还是喜欢这种方法:)

【讨论】：