使用變數作為鍵名，為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' }