Jak używać zmiennej dla klucza w obiekcie JavaScript?

Z ECMAScript 2015 możesz teraz zrobić to bezpośrednio w deklaracji obiektu z notacją w nawiasach:

var obj = {
  [key]: value
}

Gdzie {[2] } może być dowolnym wyrażeniem (np. zmienną) zwracającym wartość.

Więc tutaj twój kod będzie wyglądał następująco:

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

Gdzie thetop zostanie zastąpiona wartością zmiennej.

ES5 cytat, który mówi, że nie powinno działać

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

Nazwa właściwości:

• IdentifierName
• StringLiteral
• NumericLiteral

[...]

Nazwa właściwości produkcyjnejname: IdentifierName jest oceniana w następujący sposób:

1. Zwraca wartość łańcuchową zawierającą ten sam ciąg znaków, co / Align = "left" /

Nazwa właściwości produkcyjnejname: StringLiteral jest oceniana w następujący sposób:

1. zwraca SV [String value] StringLiteral.

Nazwa właściwości produkcjyname: NumericLiteral jest oceniana w następujący sposób:

1. niech nbr będzie wynikiem utworzenia wartości liczbowej.
2. Return ToString(nbr).

Oznacza to, że:

• { theTop : 10 } jest dokładnie taki sam jak { 'theTop' : 10 }

  The PropertyName theTop jest IdentifierName, więc jest konwertowana na 'theTop' wartość łańcuchową, która jest wartością łańcuchową 'theTop'.

• Nie można zapisywać inicjalizatorów obiektów (literałów) za pomocą kluczy zmiennych.

  Jedynymi trzema opcjami są IdentifierName (rozszerza się na ciąg znaków), StringLiteral i NumericLiteral (również rozszerza się na ciąg znaków).

Zasady zostały zmienione dla ES6: https://stackoverflow.com/a/2274327/895245

Aby dodać właściwość o "dynamicznej" nazwie do obiektu, użyłem następującej opcji:

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

key to nazwa nowej nieruchomości.

Obiektem właściwości przekazywanych do animate będzie {left: 20, width: 100, top: 10}

Jest to po prostu użycie wymaganej notacji [] zgodnie z zaleceniami innych odpowiedzi, ale z mniejszą liczbą linii kodu!

Dodanie nawiasu kwadratowego wokół zmiennej działa dobrze dla mnie. Try this

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

Podany kod:

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

Tłumaczenie:

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

Jak widzisz, deklaracja { thetop : 10 } nie używa zmiennej thetop. Zamiast tego tworzy obiekt z kluczem o nazwie thetop. Jeśli chcesz, aby klucz był wartością zmiennej thetop, musisz użyć nawiasów kwadratowych wokół thetop:

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

Składnia nawiasu kwadratowego została wprowadzona w ES6. We wcześniejszych wersjach JavaScript, należy wykonać następujące czynności:

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

W ten sposób można również osiągnąć pożądany wynik

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>

Implementacja ES5 do przypisywania kluczy znajduje się poniżej:

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

Object.defineProperties(obj, objArgs);

Załączyłem fragment, którego użyłem do konwersji na gołe obiekty.

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