Comment utiliser une variable pour une clé dans un littéral d’object JavaScript?

Pourquoi le suivant fonctionne-t-il?

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

Considérant que cela ne fonctionne pas:

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

Pour le rendre encore plus clair: pour le moment, je ne suis pas en mesure de transmettre une propriété CSS à la fonction animée en tant que variable.

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

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

Dans ES5 et versions antérieures, vous ne pouvez pas utiliser une variable comme nom de propriété dans un littéral d’object. 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 .stop().animate( aniArgs, 10 ); 

ES6 définit ComputedPropertyName dans le cadre de la grammaire des littéraux d’object, 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 principal.

Avec ECMAScript 2015, vous pouvez maintenant le faire directement dans la déclaration d’object avec la notation entre parenthèses:

 var obj = { [key]: value } 

key peut être toute sorte d’expression (par exemple une variable) renvoyant une valeur.

Donc, ici, votre code ressemblerait à ceci:

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

thetop sera remplacé par la valeur de la variable.

Citation ES5 qui dit qu’il ne devrait pas fonctionner

Spéc.: http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

Nom de la propriété :

  • IdentifiantNom
  • SsortingngLiteral
  • NumericLiteral

[…]

La propriété PropertyName: IdentifierName est évaluée comme suit:

  1. Renvoie la valeur de chaîne contenant la même séquence de caractères que IdentifierName.

La propriété PropertyName: SsortingngLiteral est évaluée comme suit:

  1. Renvoie le SV [Ssortingng] de SsortingngLiteral.

La propriété PropertyName: NumericLiteral est évaluée comme suit:

  1. Soit nbr le résultat de la formation de la valeur de NumericLiteral.
  2. Return ToSsortingng (nbr).

Cela signifie que:

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

    Le PropertyName theTop est un IdentifierName , il est donc converti en valeur de chaîne 'theTop' , qui est la valeur de chaîne de 'theTop' .

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

    Les trois seules options sont IdentifierName (se développe en chaîne littérale), SsortingngLiteral et NumericLiteral (se développe également en chaîne).

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

J’ai utilisé ce qui suit pour append une propriété avec un nom “dynamic” à un object:

 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’object des propriétés passées à animate sera {left: 20, width: 100, top: 10}

Ceci est simplement en utilisant la notation [] recommandée par les autres réponses, mais avec moins de lignes de code!

Ajouter des crochets autour de la variable fonctionne bien pour moi. Essaye ça

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

Code donné:

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

Traduction:

 var thetop = 'top'; var config = { thetop : 10 }; // config.thetop = 10 .stop().animate(config, 10); 

Comme vous pouvez le voir, la { thetop : 10 } n’utilise pas la variable thetop . Au lieu de cela, il crée un object avec une clé nommée thetop . Si vous voulez que la clé soit la valeur de la variable thetop , vous devrez alors utiliser des crochets autour du thetop :

 var thetop = 'top'; var config = { [thetop] : 10 }; // config.top = 10 .stop().animate(config, 10); 

La syntaxe entre crochets a été introduite avec ES6. Dans les versions antérieures de JavaScript, vous deviez procéder comme suit:

 var thetop = 'top'; var config = ( obj = {}, obj['' + thetop] = 10, obj ); // config.top = 10 .stop().animate(config, 10); 

De cette façon, vous pouvez également atteindre le résultat souhaité

 var jsonobj={}; var count=0; $(document).on('click','#btnadd', function() { jsonobj[count]=new Array({ "1" : $("#txtone").val()},{ "2" : $("#txttwo").val()}); count++; console.clear(); console.log(jsonobj); }); 
  value 1 value 2