这个 JavaScript 对象数组表达式 {}[] 是什么意思？答案

【问题标题】：What does this JavaScript object array expression {}[] mean?这个 JavaScript 对象数组表达式 {}[] 是什么意思？
【发布时间】：2016-02-25 09:19:57
【问题描述】：

我正在尝试理解我在 Masonry 中找到（并实际使用）的以下 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 过渡？

感谢您的帮助！

【问题讨论】：

{} 创建一个对象 .. [x] 返回值为 x 的属性
它是bracket notation。它允许您使用变量引用对象的属性。
见：stackoverflow.com/questions/13383798/…
最后六行与var transitionEndEvent = typeof docElem.style.transition == 'string' ? 'transitionend' : 'webkitTransitionEnd'; 完全一样......有人只是“聪明”
谢谢大家！帮了我很多……我同意 Jaromanda。一件简单的事情要复杂得多。

标签： javascript

【解决方案1】：

它返回对象的那个特定元素。

例如：

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

可以简写为：

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

（显然在这种情况下它没有意义，但它说明了正在发生的事情。）

【讨论】：

【解决方案2】：

前两行，

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

将值transition 或WebkitTransition 分配给transitionProp。

然后你创建一个对象，通过使用[transitionProp]，它将更像transitionPropinside ['transition'/'WebkitTransition'] 的值。

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

换句话说，它看起来像这样

var transitionEndEvent = transitionEndEventObj[ 'transition'];

或

var transitionEndEvent = transitionEndEventObj['WebkitTransition'];

【讨论】：

【解决方案3】：

要向 JSON 添加一些属性，我们使用

object["property"] = value;

因此，您的代码中的上述几行是为了从对象访问属性名称 transitionProp。

所以变量transitionEndEvent 将保存transitionProp 属性的值。

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

【讨论】：

这里没有 JSON。

【解决方案4】：

这里transitionEndEvent 将包含：

'webkitTransitionEnd' 如果transitionProp == 'WebkitTransition' 或

'transitionend' 如果transitionProp == 'transition'

【讨论】：