Что такое выражение JavaScript объекта JavaScript {} [] означает?

Question

Я пытаюсь понять следующий код JavaScript я нашел (и на самом деле использовать) в масонстве:

var docElem = document.documentElement; 
var transitionProp = typeof docElem.style.transition == 'string' ? 
    'transition' : 'WebkitTransition'; 
var transitionEndEvent = { 
    WebkitTransition: 'webkitTransitionEnd', 
    transition: 'transitionend' 
}[ transitionProp ]; 

ли выражение {} [] означают, что переменная transitionProp добавляется объект transitionEndEvent? И является ли выражением типа docElem.style.transition каким-то образом выяснить, поддерживается ли переход css?

Благодарим за помощь!

Answer 1

Он возвращает этот конкретный элемент объекта.

Например:

var obj = { key: 'value' }; 
var val = obj['key']); 

Может быть сокращен до:

var val = { key: 'value' }['key']; 

(. Очевидно, что в данном случае это бессмысленно, но иллюстрирует то, что происходит)

Answer 2

первых двух линий ,

var docElem = document.documentElement; 
var transitionProp = typeof docElem.style.transition == 'string' ? 
    'transition' : 'WebkitTransition'; 

присвоит значение transition или WebkitTransition - transitionProp.

Затем вы создаете объект и с помощью [transitionProp] он больше походит на значение transitionProp внутри ['transition'/'WebkitTransition'].

var transitionEndEventObj = { 
    WebkitTransition: 'webkitTransitionEnd', 
    transition: 'transitionend' 
}; 
var transitionEndEvent = transitionEndEventObj[ transitionProp ]; 

в других терминах это будет выглядеть либо как это

var transitionEndEvent = transitionEndEventObj[ 'transition']; 

или

var transitionEndEvent = transitionEndEventObj['WebkitTransition']; 

Answer 3

здесь transitionEndEvent будет содержать:

'webkitTransitionEnd' если transitionProp == 'WebkitTransition' или

'transitionend' если transitionProp == 'transition'

Answer 4

Чтобы добавить свойство в формате JSON мы используем

object["property"] = value; 

Так выше строки в коде написано, чтобы получить доступ к имя свойства transitionProp от объекта.

Таким образом, переменная transitionEndEvent будет удерживать значение свойства transitionProp.

var transitionEndEvent = { 
    WebkitTransition: 'webkitTransitionEnd', 
    transition: 'transitionend' 
}[ transitionProp ];