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

avec 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) retournant une valeur.

alors voici votre code ressemblerait à:

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

où thetop sera remplacé par la valeur variable.

ES5 citation qui dit qu'il ne devrait pas travailler

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

PropertyName :

• identifiant-nom
• StringLiteral
• NumericLiteral

[...]

Le nom propre de production: IdentifierName est évalué comme suit:

1. renvoie la valeur de chaîne contenant la même séquence de caractères que le nom D'identification.

le nom propre de la production : StringLiteral est évalué comme suit:

1. renvoie la valeur SV [String] du StringLiteral.

le nom propre de la production : NumericLiteral est évalué comme suit:

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

cela signifie que:

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

  le PropertyName theTop est un IdentifierName , il est donc converti en 'theTop' chaîne de valeur, qui est la valeur de la chaîne '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 (passe en chaîne littérale), StringLiteral , et NumericLiteral (passe également en chaîne de caractères).

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

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}

c'est juste utiliser la notation [] comme recommandé par les autres réponses, mais avec moins de lignes de code!

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

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

code donné:

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

traduction:

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

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

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

la syntaxe des crochets carrés a été présenté avec ES6. Dans les versions précédentes de JavaScript, vous auriez à faire ce qui suit:

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

de cette façon aussi vous pouvez atteindre la sortie désirée

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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

ES5 mise en œuvre assigner des touches ci-dessous:

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

Object.defineProperties(obj, objArgs);

j'ai joint un fragment 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);