Comment utiliser une variable pour une clé dans un objet JavaScript littérale?

{ thetop : 10 } est valable un objet littéral. Le code va créer un objet avec une propriété nommée thetop qui a une valeur de 10. Les deux suivantes sont les mêmes:

obj = { thetop : 10 };
obj = { "thetop" : 10 };

Dans l'ES5 et les versions antérieures, vous ne pouvez pas utiliser une variable comme nom de la propriété à l'intérieur d'un objet littéral. Votre seule option est de faire ce qui suit:

var thetop = "top";

//create the object literal
var aniArgs = {};

//Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

//Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 définit ComputedPropertyName dans le cadre de la grammaire pour objet de littéraux, qui permet d'écrire le code comme ceci:

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); //-> 10

Vous pouvez utiliser cette nouvelle syntaxe dans les dernières versions de chaque intégrer navigateur.

OriginalL'auteur Andy E

ES5 citation qui dit qu'il ne devrait pas travailler

Note: les règles ont changé pour ES6: https://stackoverflow.com/a/2274327/895245

Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

PropertyName :

• Identifiant-nom
• StringLiteral
• NumericLiteral

[...]

La production PropertyName : identifiant-nom est évaluée comme suit:

1. Retourner la valeur de Chaîne contenant la même séquence de caractères que l'identifiant-nom.

La production PropertyName : StringLiteral est évaluée comme suit:

1. Retour de la SV [Chaîne de valeur] de la StringLiteral.

La production PropertyName : NumericLiteral est évaluée comme suit:

1. Laisser nbr être le résultat de la formation de la valeur de la NumericLiteral.
2. Retour ToString(nbr).

Cela signifie que:

• { theTop : 10 } est exactement la même que { 'theTop' : 10 }

  La PropertyName theTop est un IdentifierName, donc il s'est converti à l' 'theTop' de la chaîne de valeur, qui est la valeur de la chaîne de 'theTop'.

• Il n'est pas possible d'écrire les initialiseurs d'objets (littéraux) avec des variables clés.

  La seule des trois options sont IdentifierName (s'élargit pour littéral de chaîne), StringLiteral, et NumericLiteral (également étend sur une chaîne).

OriginalL'auteur Ciro Santilli 新疆改造中心996ICU六四事件

Ajoutant des crochets autour de la variable fonctionne bien pour moi. Essayez cette

var thetop = 'top';
<something>.stop().animate(
    { [thetop] : 10 }, 10
);

OriginalL'auteur Vaishali

Je ne pouvais pas trouver un exemple simple sur les différences entre les ES6 et ES5, j'ai donc fait un. Les deux exemples de code créer exactement le même objet. Mais l'ES5 exemple fonctionne aussi dans les navigateurs plus anciens (comme IE11), wheres l'ES6 exemple qui ne fonctionne pas.

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

OriginalL'auteur Dieter Schmitt

Si vous voulez clé d'objet à être le même que le nom de variable, il ya une petite main dans ES 2015.
De nouvelles notations dans ECMAScript 2015

var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); //print 10

OriginalL'auteur ROROROOROROR