JavaScript 方括号 function 调用

Question

当我遇到这一行时正在浏览 jQuery 源代码：

jQuery(this)[ state ? "show" : "hide" ]();

有什么优势吗

state ? jQuery(this).show() : jQuery(this).hide();

?

独立示例：

var object = {
    foo: function() {
        alert('foo');
    },

    bar: function() {
        alert('bar');
    }
};  


object[true ? 'foo' : 'bar']();
object[false ? 'foo' : 'bar']();

Answer 1

性能上没有优势。 但是代码长度有优势（如果你认为这是一个优势），特别是如果你的函数中有很多参数，那么 DRY 原则（不要重复代码）。

考虑以下：

obj[ cond ? "foo" : "bar" ]("param1", "param2", "param3");

相对：

cond ? obj.foo("param1", "param2", "param3") : obj.bar("param1", "param2", "param3");

如您所见，您以第二种方式重复“很多”代码

希望这可以帮助。 干杯

Answer 2

在您的示例中，两者之间没有区别

jQuery(this)[ state ? "show" : "hide" ]();

和

state ? jQuery(this).show() : jQuery(this).hide();

但是，可以使用正方形来调用没有名称的 function：

var myFunctionName = 'show';
jQuery(this)[ myFunctionName ]();

为什么这很有用？ 在上面的例子中，它完全没用。 但是我们可以找到一些可能很好的情况：

// list of available methods
var effects = [ 'hide', 'slideUp', 'fadeOut' ];

// get a random index between 0 and effects.length-1 (2 in this case)
var randomIndex = Math.floor(Math.random() * (effects.length)); 

// get the method name
var methodToCall = effects[ randomIndex ];

jQuery(this)[ methodToCall ]();

此代码段将选择一种随机方法并通过 jQuery object 调用该方法。 这不是很好吗？ :)

Answer 3

有没有优势

不，除了稍微短一些的代码，并且不重复jQuery(this).

但是，可以通过首先声明$this来减轻重复。

我发现这种模式不是特别容易阅读，所以我自己唯一使用它的时候是参数列表不重要，并且不依赖于正在调用的方法。

Answer 4

jQuery方式更加简洁，遵循DRY原则。 我认为这是第二个示例的主要优势。

Answer 5

按顺序，我排名：

1. 代码可靠地按预期工作（没有问题的解决方案是可取的）
2. 代码可读且易于维护（缺乏可读性或可维护性会滋生错误并减慢开发速度）
3. 代码是 DRY（重复不利于可读性、可维护性，有时甚至不利于性能）
4. 代码很短（如果它实现了以上所有的事情，那么通常越短越好）

我对jQuery(this)[ state? "show": "hide" ](); jQuery(this)[ state? "show": "hide" ](); 是它不是很多人习惯看到和习惯阅读的常见设计模式。 因此，它的可读性不是很高，并且很容易使将来试图维护此代码的人感到困惑（导致错误）。 正如我上面的优先级所示，如果两者不一致，我更倾向于可读性而不是 DRY。

在这种情况下，我可能会写：

var $this = jQuery(this);
state ? $this.show(): $this.hide();

不是那么短，但在我看来更具可读性。