使用变量作为键名，向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')

  // 这里是问题所在
  obj.name = value
})

如果itemsFromDom中包含一个id为"myId"的元素，我希望obj有一个名为"myId"的属性。上面的代码给我name。

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

Answer 1

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

var obj = {
  [key]: value
}

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

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

Answer 2

你可以使用等效的语法：

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' }