使用变量作为属性名创建对象

110

在创建对象时,是否可能在对象字面量属性中使用变量名?

例如:

function createJSON (propertyName){
    return { propertyName : "Value"};
}

var myObject = createJSON("myProperty");

console.log(myObject.propertyName);  // Prints "value"
console.log(myObject.myProperty);  // This property does not exist
4个回答

248

如果你想使用一个变量作为属性名,你可以使用计算属性名。将变量名放在方括号中:

var foo = "bar";
var ob  = { [foo]: "something" }; // ob.bar === "something"

如果您想要支持Internet Explorer,您将需要使用ES5方法(您可以通过编写现代语法(如上所述),然后应用Babel来获得此方法):

首先创建对象,然后使用方括号表示法添加属性。

var foo = "bar";
var ob  = {};
ob[foo] = "something"; // === ob.bar = "something"

如果您想要以编程方式创建JSON,则需要将对象序列化为符合JSON格式的字符串。例如,可以使用 JSON.stringify 方法


50

ES6引入了计算属性名,使您可以进行

function CreateJSON (propertyName){
    var myObject = { [propertyName] : "Value"};
}

请注意,目前浏览器支持几乎可以忽略不计。


有趣,浏览器支持方面有任何更新吗? - Ayyash
当我写这个答案时,只有Firefox Nigthly支持。现在根据MDN,Firefox 34+和Safari 7.1.3+也支持。 - Oriol
这对我来说是最好的答案。我正在使用Node.js。 - James
截至2020年,除IE外,所有浏览器现在都支持计算属性名。 - BenHohner

10

你可以有点像这样做:

  var myObject = {};
  CreateProp("myProperty","MyValue");

  function CreateProp(propertyName, propertyValue)
  {
      myObject[propertyName] = propertyValue;
      alert(myObject[propertyName]);  // prints "MyValue" 
  };

我个人更喜欢这种语法:

function jsonObject()
{
};
var myNoteObject = new jsonObject();

function SaveJsonObject()
{
    myNoteObject.Control = new jsonObject();
    myNoteObject.Control.Field1= "Fred";
    myNoteObject.Control.Field2= "Wilma";
    myNoteObject.Control.Field3= "Flintstone";
    myNoteObject.Control.Id= "1234";
    myNoteObject.Other= new jsonObject();
    myNoteObject.Other.One="myone";
};

然后您可以使用以下内容:

SaveJsonObject();
var myNoteJSON = JSON.stringify(myNoteObject);

注意:这里使用了来自http://www.json.org/js.html的json2.js。


6

现在较新的浏览器都支持JSON功能,而且json2.js也是一个完全有效的备选方案。因此,一种可能适用的方法是构造一个JSON字符串,然后解析它。

function func(prop, val) {
    var jsonStr = '{"'+prop+'":'+val+'}';
    return JSON.parse(jsonStr);
}

var testa = func("init", 1);
console.log(testa.init);//1

请记住,JSON属性名称需要用双引号括起来。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接