使用变量作为名称，将属性添加到JavaScript对象？

Question

我正在使用jQuery从DOM中获取项目，并且想要使用DOM元素的id来设置对象的属性。

示例

const obj = {}

jQuery(itemsFromDom).each(function() {
  const element = jQuery(this)
  const name = element.attr('id')
  const value = element.attr('value')

  // Here is the problem
  obj.name = value
})

如果itemsFromDom包含一个具有"id"为"myId"的元素，我想让obj拥有一个名为"myId"的属性。但上述代码给了我name。

如何在JavaScript中使用变量来命名对象的属性？

- Todd R

---

请参阅属性访问：点表示法与括号表示法？和使用变量动态访问对象属性。 - Bergi

请参阅 如何在JavaScript中从变量值创建对象属性？ - Bergi

我曾将此问题关闭为如何在JavaScript对象文字中使用变量作为键？的重复，然后这个目标被使用动态计算名称访问对象属性错误地替换了。现在它重新打开了 - 这很奇怪和不幸。我的原始重复目标至少应该在这里提到。 - Sebastian Simon

Answer 1

您可以使用等效的语法：

obj[name] = value

例子:

let obj = {};
obj["the_key"] = "the_value";

或者使用 ES6 特性：

let key = "the_key";
let obj = {
  [key]: "the_value",
};

在这两个例子中， console.log(obj)将返回: { the_key: 'the_value' }

- CMS

---

这种语法有一个名称吗？或者有哪些相关资料可以阅读？ - Pixelsmith

这是如何访问属性以及如何创建对象的文档。 - Sebastian Simon

@Pixelsmith，它们被称为计算属性名。 - luissquall

Answer 2

使用 ECMAScript 2015，您可以直接在对象声明中使用方括号表示法完成此操作：

var obj = {
  [key]: value
}

其中key可以是任何返回值的表达式（例如变量）：

var obj = {
  ['hello']: 'World',
  [x + 2]: 42,
  [someObject.getId()]: someVar
}

- kube

---

这个问题是关于修改现有对象，而不是创建一个新对象。 - Michał Perłakowski

这个问题可能是关于修改的，但它被其他关于动态创建对象的问题所引用，所以我最终来到了这里，并从这个答案中受益匪浅。 - Oliver Lloyd

@wOxxOm 哈哈，是啊，我为什么要费劲地使用 obj[name]=value，而不是直接使用你的建议呢？ - chiliNUT

我不确定什么是ECMAScript 6，但我非常欣赏它。 - Arthur Tarasov

@ArthurTarasov：ECMAScript 6更正式地称为ECMAScript 2015（“ES2015”），又称ECMAScript第6版（“ES6”）。这是JavaScript的规范，于2015年6月发布。自那以后，我们已经有了ES2016，很快我们就会有ES2017，它们现在是按年度循环发布的。 - T.J. Crowder

Answer 3

你甚至可以像这样制作对象列表。

var feeTypeList = [];
$('#feeTypeTable > tbody > tr').each(function (i, el) {
    var feeType = {};

    var $ID = $(this).find("input[id^=txtFeeType]").attr('id');

    feeType["feeTypeID"] = $('#ddlTerm').val();
    feeType["feeTypeName"] = $('#ddlProgram').val();
    feeType["feeTypeDescription"] = $('#ddlBatch').val();

    feeTypeList.push(feeType);
});

- dnxit

Answer 4

访问对象属性有两种不同的表示方法：

• 点 表示法：myObj.prop1
• 方括号 表示法：myObj["prop1"]

点表示法快速简单，但您必须明确使用实际的属性名称。不能进行替换、变量等操作。

方括号表示法是开放式的。它使用字符串，但您可以使用任何合法的js代码生成该字符串。您可以将字符串指定为字面值（尽管在这种情况下，点表示法更易于阅读），也可以使用变量或以某种方式计算。

因此，以下所有内容都将myObj的名为prop1的属性设置为值Hello：

// quick easy-on-the-eye dot notation
myObj.prop1 = "Hello";

// brackets+literal
myObj["prop1"] = "Hello";

// using a variable
var x = "prop1"; 
myObj[x] = "Hello";                     

// calculate the accessor string in some weird way
var numList = [0,1,2];
myObj[ "prop" + numList[1] ] = "Hello";     

陷阱：

myObj.[xxxx] = "Hello";      // wrong: mixed notations, syntax fail
myObj[prop1] = "Hello";      // wrong: this expects a variable called prop1

简短概括: 如果你想计算或引用键（key），必须使用方括号表示法。如果你在明确使用键，则使用点表示法编写简单清晰的代码。

注意：还有其他一些好的和正确的答案，但对于初学JS的人来说可能有点简短。这可能对某些人有用。

- jim birch

Answer 5

First we need to define key as variable and then we need to assign as key as object., for example

var data = {key:'dynamic_key',value:'dynamic_value'}
var key = data.key;
var obj = { [key]: data.value}
console.log(obj)

- KARTHIKEYAN.A

Answer 6

使用lodash，您可以像这样创建新对象_.set：

obj = _.set({}, key, val);

你可以像这样将其设置为现有对象：

var existingObj = { a: 1 };
_.set(existingObj, 'a', 5); // existingObj will be: { a: 5 }

如果您想在路径中使用点（“.”），请注意，因为lodash可以设置层次结构，例如：

_.set({}, "a.b.c", "d"); // { "a": { "b": { "c": "d" } } }

- Momos Morbias

Answer 7

虽然不是专门针对jQuery的，但与该主题相关。我在EC6 React项目中使用了这个，希望能帮到某些人:

this.setState({ [`${name}`]: value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[name]));
    });

PS：请注意引号字符。

- javatar

---

根据上面的答案，{ [${name}]: value} 可以简化为 { [name]: value}。模板字面量是不必要的。 - Madbreaks

Answer 8

访问对象值的三种方法 我们可以通过传递适当的键来输出对象值。因为我在示例中使用了表情符号作为键，所以有点棘手。所以让我们看一个更简单的例子。

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation (string key)
me['name']; // samantha

// 3. Bracket notation (variable key)
let key = 'name';
me[key]; // samantha

know more

- MD SHAYON

Answer 9

随着ES2015的到来，Object.assign和computed property names，OP的代码简化为：

var obj = Object.assign.apply({}, $(itemsFromDom).map((i, el) => ({[el.id]: el.value})));

- wOxxOm

Answer 10

如果您想动态地向对象添加字段，最简单的方法如下：

let params = [
  { key: "k1", value: 1 },
  { key: "k2", value: 2 },
  { key: "k3", value: 3 },
];
let data = {};

for (let i = 0; i < params.length; i++) {
  data[params[i].key] = params[i].value;
}

console.log(data); // -> { k1: 1, k2: 2, k3: 3 }

- Sruthi Poddutur