Comment utiliser une variable comme clé dans un objet JavaScript littéral ?

Question

Pourquoi ce qui suit fonctionne-t-il ?

<something>.stop().animate(
    { 'top' : 10 }, 10
);

Alors que cela ne fonctionne pas :

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

Pour être encore plus clair : Pour le moment, je ne suis pas en mesure de passer une propriété CSS à la fonction animate en tant que variable.

Answer 1

{ thetop : 10 } est un objet littéral valide. Le code va créer un objet avec une propriété nommée thetop qui a une valeur de 10. Les deux éléments suivants sont identiques :

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

Dans les versions ES5 et antérieures, vous ne pouvez pas utiliser une variable comme nom de propriété dans 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 comme partie de la grammaire pour les littéraux d'objet, ce qui vous 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 navigateur grand public.

Answer 2

Con ECMAScript 2015 vous pouvez maintenant le faire directement dans la déclaration d'objet avec la notation entre parenthèses : 

var obj = {
  [key]: value
}

Où key peut être n'importe quelle sorte d'expression (par exemple une variable) renvoyant une valeur.

Donc ici votre code ressemblerait à :

<something>.stop().animate({
  [thetop]: 10
}, 10)

Où thetop sera évaluée avant d'être utilisée comme clé.

Answer 3

Citation de l'ES5 qui dit que cela ne devrait pas fonctionner

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

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

Nom de la propriété :

• Nom de l'identifiant
• StringLiteral
• NumériqueLittéral

[...]

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

1. Renvoie la valeur String contenant la même séquence de caractères que l'IdentifierName.

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

1. Renvoie la SV [valeur de la chaîne] du StringLiteral.

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

1. Soit nbr le résultat de la formation de la valeur du NumericLiteral.
2. Retourner ToString(nbr).

Cela signifie que :

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

  El PropertyName theTop es un IdentifierName pour qu'il soit converti en 'theTop' qui est la valeur de la chaîne de caractères de 'theTop' .

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

  Les trois seules options sont IdentifierName (se développe en chaîne littérale), StringLiteral y NumericLiteral (se développe également en une chaîne de caractères).

Answer 4

ES6 / 2020

Si vous essayez de pousser des données vers un objet en utilisant "key:value" depuis une autre source, vous pouvez utiliser quelque chose comme ceci :

let obj = {}
let key = "foo"
let value = "bar"

obj[`${key}`] = value

// A `console.log(obj)` would return:
// {foo: "bar}

// A `typeof obj` would return:
// "object"

J'espère que cela aidera quelqu'un :)

Answer 5

J'ai utilisé ce qui suit pour ajouter une propriété avec un nom "dynamique" à un objet :

var key = 'top';
$('#myElement').animate(
   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
   10
);

key est le nom de la nouvelle propriété.

L'objet des propriétés passées à animate sera {left: 20, width: 100, top: 10}

Il s'agit simplement d'utiliser les [] comme recommandé par les autres réponses, mais avec moins de lignes de code !