JavaScript通过变量设置对象键

Question

我正在使用JavaScript构建一些对象，并将这些对象推入数组中，我将要使用的键存储在一个变量中，然后像这样创建我的对象：

var key = "happyCount";
myArray.push( { key : someValueArray } );

但是当我尝试检查我的对象数组时，每个对象的键都是"key"而不是变量key的值。是否有方法可以从变量设置键的值？

更好的说明请参考以下链接： http://jsfiddle.net/Fr6eY/3/

- Hunter McMillen

---

ES6 中的解决方案是将变量放在方括号中以便进行求值。 var key = "happyCount"; myArray.push({ [key]: someValueArray }); - Dan Cron

目前唯一不支持该es6功能的浏览器是IE11：https://kangax.github.io/compat-table/es6/#test-object_literal_extensions_computed_properties - Hunter McMillen

@Jake 这是一个很好的观点。一个可能的解决方案是使用babel将ES6转译为ES5。 - Dan Cron

@Jake 这正是 Babel 的用途。就像 Dan Cron 上面提到的那样。 - Hunter McMillen

像Hunter所说，最好不要为ES5用户编码。如果需要支持旧版浏览器，则需要进行填充和转译。现在是2018年，不是2009年，我们真的需要向前迈进。 - Keith

Answer 1

你需要首先创建对象，然后使用[]来设置它。

var key = "happyCount";
var obj = {};

obj[key] = someValueArray;
myArray.push(obj);

---

更新于2021年:

计算属性名是ECMAScript 2015（ES6）中引入的一个功能，它允许您动态计算JavaScript对象字面量符号中对象属性的名称。

const yourKeyVariable = "happyCount";
const someValueArray= [...];

const obj = {
    [yourKeyVariable]: someValueArray,
}

- gen_Eric

---

@AlexG：这个词在问题中被使用了。 - gen_Eric

请注意，ES6中的情况有所改变（改善），即{[key]:someValueArray}。 - Frank N

@Frank Nocke 我期望能在大约10年后使用它，当时我们需要支持的所有“浏览器”都支持它... - Jake

@Jake 今天你可以使用ES6或ES7编程语言，然后使用Babel将你的JS文件转换为ES5。这就是现代web应用程序的构建方式。 - Barry Staes

对于那些想知道ES6功能如何称呼的人：它被称为“计算属性名”。 - juggernaut

Answer 2

在ES6中，您可以这样做。

var key = "name";
var person = {[key]:"John"}; // same as var person = {"name" : "John"}
console.log(person); // should print  Object { name="John"}

    var key = "name";
    var person = {[key]:"John"};
    console.log(person); // should print  Object { name="John"}

这被称为计算属性名，它使用方括号（中括号）[]来实现。

例如：{ [variableName] : someValue }

从 ECMAScript 2015 开始，对象初始化语法还支持计算属性名。这允许您将一个表达式放在方括号[]中，该表达式将被计算并用作属性名。

对于 ES5，可以尝试以下内容：

var yourObject = {};

yourObject[yourKey] = "yourValue";

console.log(yourObject );

例子：

var person = {};
var key = "name";

person[key] /* this is same as person.name */ = "John";

console.log(person); // should print  Object { name="John"}

    var person = {};
    var key = "name";
    
    person[key] /* this is same as person.name */ = "John";
    
    console.log(person); // should print  Object { name="John"}

- kiranvj

---

我在这个链接提供了一个使用underscore的解决方案，我认为对人们可能会有一些兴趣：https://dev59.com/lW035IYBdhLWcg3wE7xr#30608422 - rashadb

Answer 3

现实情况

JS的问题很简单：

{ x: 2 }

与以下代码等效：

{ "x": 2 }

即使你已经定义了变量x，也要执行以下操作：

解决方案

在键的标识符周围添加方括号[]：

var key = "happyCount";
myArray.push( { [key] : someValueArray } );

现在关键字var已经不常用，请使用const或let代替。

tldr;

- underflow

Answer 4

var key = "happyCount";
myArray.push( { [key] : someValueArray } );

- Ishaan Kapoor

---

请阅读如何撰写一个好的答案？。虽然这个代码块可能会回答OP的问题，但如果您解释一下这段代码与问题中的代码有何不同，您做了什么修改，为什么要这样修改以及为什么这样做可以解决问题而不引入其他问题，则会更加有用。 - Saeed Zhiany

这与现有答案没有不同的答案。 - Akaisteph7

Answer 5

在ES6中，我们可以像这样编写对象

const key= "Name";
const values = "RJK"

const obj = {
    [key]: values,
}

- Rahul Pawar

---

这并不是与现有答案不同的答案。 - Akaisteph7

Answer 6

使用这个。

var key = 'a'
var val = 'b'

console.log({[key]:val})

//a:'b'

- devtunus

---

这个答案已经被@kiranvj给出了。 - Tobias S.

我确实喜欢能够很快得到答案，而不是像@kiranvjs的回答。 - jfunk

Answer 7

在TypeScript中，它应该看起来像这样。

    let title ="Current User";
    type User = {
      [key:string | number | symbol]: any
    };

    let myVar: User = {};

    myVar[ title ] = "App Developer";

    console.log(myVar)// Prints: { Current User:"App Developer"}

- jbz

Answer 8

let key = "name";
let name= "john";
const obj ={
 id:01
}
obj[key] = name;
console.log(obj); // output will {id:01,name:"john}

使用方括号，它将被设置为键

- Surendra Singh Kamboj

---

这并不是与现有答案不同的答案。 - Akaisteph7

Answer 9

给定

var key = "happyCount";
const someValueArray= [1, 3, 5, 7];

使用key原样：

myArray.push({
  [key]: someValueArray
});

使用带有其他前缀或后缀的“key”：

myArray.push({
  [`${key}Array`]: someValueArray
});

来源：计算属性名称

- Akaisteph7