Як використовувати змінну для ключа в літеральному об'єкті JavaScript?

Чому працює наступне?

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

Тоді як це не працює:

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

Щоб було ще зрозуміліше: на даний момент я не в змозі передати властивість CSS анімованій функції як змінної.

{ thetop : 10 }є дійсним літеральним об'єктом. Код створить об’єкт із властивістю на ім'я, thetopяке має значення 10. Обидва наведені нижче є однаковими:

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

У ES5 та новіших версіях ви не можете використовувати змінну як ім'я властивості всередині об'єкта-літералу. Ваш єдиний варіант - зробити наступне:

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 визначає ComputedPropertyName як частина граматики для літералів об'єктів, що дозволяє писати код , як це:

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

Ви можете використовувати цей новий синтаксис в останніх версіях кожного основного браузера.

З ECMAScript 2015 тепер ви можете це зробити безпосередньо в оголошенні об'єкта з позначеннями дужок: 

var obj = {
  [key]: value
}

Де keyможе бути будь-який вираз (наприклад, змінна), що повертає значення.

Отже, ваш код виглядатиме так:

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

Де thetopбуде оцінено перед тим, як використовувати його як ключовий.

Цитата ES5, яка говорить, що вона не повинна працювати

Примітка: правила змінилися для ES6: https://stackoverflow.com/a/2274327/895245

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

Назва власності :

• IdentifierName
• StringLiteral
• Числовий Літеральний

[...]

Виробнича PropertyName: IdentifierName оцінюється наступним чином:

1. Поверніть значення String, що містить ту саму послідовність символів, що і ім'я IdentifierName.

Виробнича PropertyName: StringLiteral оцінюється наступним чином:

1. Поверніть SV [значення рядка] StringLiteral.

Виробнича PropertyName: NumericLiteral оцінюється наступним чином:

1. Нехай nbr є результатом формування значення NumericLiteral.
2. Повернутись до ToString (nbr).

Це означає що:

• { theTop : 10 } точно так само, як { 'theTop' : 10 }

  Оно PropertyName theTopє IdentifierName, тому воно перетворюється на 'theTop'значення рядка, яке є значенням рядка 'theTop'.

• Неможливо записати ініціалізатори об'єктів (літерали) зі змінними клавішами.

  Єдині три варіанти: IdentifierName(розширюється на літеральний рядок) StringLiteral, і NumericLiteral(також розширюється на рядок).

Я використовував наступне, щоб додати властивість з "динамічним" ім'ям до об'єкта:

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

key - це назва нового ресурсу.

Об'єкт властивостей, переданих до animate, буде{left: 20, width: 100, top: 10}

Це просто використання необхідних []позначень, як рекомендують інші відповіді, але з меншою кількістю рядків коду!

Додавання квадратної дужки навколо змінної працює добре для мене. Спробуйте це

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

Я не зміг знайти простий приклад про відмінності між ES6 та ES5, тому зробив один. Обидва зразки коду створюють абсолютно один і той же об’єкт. Але приклад ES5 також працює у старих браузерах (як IE11), де приклад ES6 не відповідає.

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

Оновлення / приклад 2020 року ...

Більш складний приклад, використовуючи дужки та літерали ... щось, що вам, можливо, доведеться робити, наприклад, з vue / axios. Загорніть буквальне слово в дужки, так

[`...`]

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

Даний код:

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

Переклад:

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

Як бачимо, в { thetop : 10 }декларації не використовується змінна thetop. Натомість він створює об’єкт з назвою ключа thetop. Якщо ви хочете, щоб ключ був значенням змінної thetop, тоді вам доведеться використовувати квадратні дужки навколо thetop:

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

Синтаксис квадратних дужок було введено разом з ES6. У попередніх версіях JavaScript вам слід зробити наступне:

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

Я не можу повірити, що це ще не було опубліковано: просто використовуйте стрілочні позначення з анонімною оцінкою!

Повністю неінвазивний, не возиться з простором імен, і він займає лише один рядок:

myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);

демонстрація:

var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
console.log(myNewObj);

корисний у середовищах, які ще не підтримують новий {[myKey]: myValue}синтаксис, наприклад, очевидно; Я щойно перевірив це на своїй консолі веб-розробників — Firefox 72.0.1, випущеній 2020-01-08.

(Я впевнений, що ви потенційно можете зробити якісь більш потужні / розширювані рішення або що-небудь, що передбачає розумне використання reduce, але в цей момент вам, мабуть, краще послужити, просто вирвавши створення об'єкта в його власну функцію, а не примусово заклинюючи її все в рядку)

не так уже й важливо , оскільки ОП запитав це десять років тому, але заради для повноти і продемонструвати , як це точно відповідь на питання , як то кажуть, я покажу це в оригінальному контексті:

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

Таким чином, ви також можете досягти бажаного результату

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 для призначення ключів наведена нижче:

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

Object.defineProperties(obj, objArgs);

Я додав фрагмент, який використовував для перетворення на голий об'єкт.

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

Ви можете зробити наступне для ES5:

var theTop = 'top'
<something>.stop().animate(
  JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)

Або витягнути до функції:

function newObj (key, value) {
  return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}

var theTop = 'top'
<something>.stop().animate(
  newObj(theTop, 10), 10
)

Якщо ви хочете, щоб ключ об’єкта був таким самим, як ім'я змінної, в ES 2015. короткий перелік. Нові позначення в ECMAScript 2015

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

Ви можете це зробити так:

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

Ви також можете спробувати так:

let array1 = [{
    "description": "THURSDAY",
    "count": "1",
    "date": "2019-12-05"
},
{
    "description": "WEDNESDAY",
    "count": "0",
    "date": "2019-12-04"
}]
let res = array1.map((value, index) => {
    return { [value.description]: { count: value.count, date: value.date } }
})
console.log(res);