Как использовать переменную для ключа в литерале объектов JavaScript?

Question

Как использовать переменную для ключа в литерале объектов JavaScript?

Почему следующее работает?

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

Принимая во внимание, что это не работает:

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

Сделать это еще более ясным: В данный момент я не могу передать свойство CSS анимационной функции как переменная.

345

properties javascript jquery variables object-literal

задан Ciro Santilli 新疆改造中心法轮功六四事件 16 March 2018 в 00:52

1 ответ

Другие вопросы по тегам:

properties javascript jquery variables object-literal

Похожие вопросы:

score 588 · Accepted Answer

{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

Вы можете использовать это новый синтаксис в последних версиях каждого основного браузера.