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

Mise à jour 2020/exemple...

Un exemple plus complexe, utilisant des parenthèses et des littéraux... ce que vous pouvez être amené à faire par exemple avec vue/axios. Placez le littéral entre parenthèses, comme suit

[ ` ... ` ]

{
    [`filter[${query.key}]`]: query.value,  // 'filter[foo]' : 'bar'
}

Answer 2

Dans le deuxième top n'est même pas défini. Quelle erreur obtenez-vous ?

Mise à jour il a mis à jour sa question en fonction de cette réponse :)

Nouvelle réponse, comme déjà signalé, que les noms des objets ne peuvent pas être des variables dans les littéraux d'objet.

Answer 3

L'implémentation ES5 pour assigner des clés est ci-dessous :

var obj = Object.create(null),
    objArgs = (
      (objArgs = {}),
      (objArgs.someKey = {
        value: 'someValue'
      }), objArgs);

Object.defineProperties(obj, objArgs);

J'ai joint un extrait que j'ai utilisé pour convertir en objet nu.

var obj = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': [
    'value3',
    'value4',
  ],
  'key4': {
    'key5': 'value5'
  }
}

var bareObj = function(obj) {

  var objArgs,
    bareObj = Object.create(null);

  Object.entries(obj).forEach(function([key, value]) {

    var objArgs = (
      (objArgs = {}),
      (objArgs[key] = {
        value: value
      }), objArgs);

    Object.defineProperties(bareObj, objArgs);

  });

  return {
    input: obj,
    output: bareObj
  };

}(obj);

if (!Object.entries) {
  Object.entries = function(obj){
    var arr = [];
    Object.keys(obj).forEach(function(key){
      arr.push([key, obj[key]]);
    });
    return arr;
  }
}

console(bareObj);

Answer 4

Si vous voulez que la clé de l'objet soit identique au nom de la variable, il existe un raccourci dans l'ES 2015. Nouvelles notations dans ECMAScript 2015

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

Answer 5

Vous pouvez le faire de cette façon :

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