“复杂的”javascript 三元组

Question

参考Shorten code using Ternary Operators 中提供的答案，我想知道为什么不推荐以下三元。

$('#myID')[(myVar1 === myVar2) ? 'addClass' : 'removeClass']('myClass');

建议的答案是：

$('#myID').toggleClass('myClass', myVar1 === myVar2);

为了澄清，我理解后者更好，因为它利用第二个参数来进行切换类进行评估。我想知道的是，第一个示例是否通常不推荐，因为它的可读性或其他一些因素。还有，第一个三元有特殊的名字吗？我很好奇它是否被称为特殊的东西，以防我不得不再次搜索它。

非常感谢！

Answer 1

第一个示例是使用三元运算符来确定将传递给括号表示法的属性字符串。这与任何其他赋值的三元用法没有什么不同：

var argmnt = "emphasize",
    method = condition ? "addClass" : "removeClass" ;

$( selector )[ method ]( argmnt );

唯一的区别是您将三元本身放在括号内：

$( selector )[ condition ? "addClass" : "removeClass" ]( argmnt );

这确实使代码更难阅读，并且不必要地复制了另一个非常好的方法的功能：$.fn.toggleClass。

我无法窥探其他人的想法，但我怀疑这就是您引用答案的作者选择更简单、更简洁的解决方案的原因。

更多关于括号符号

对象键允许比点表示法允许的更多字符和灵活性。例如，虽然first-name 是一个有效的密钥，但您不能使用像person.first-name 这样的点符号来访问它。这就是括号符号派上用场的地方：person['first-name'] 完全有效。

我们还可以使用括号表示法进行内联评估或保存变量：

var method = "addClass";
$( selector )[ method ]( argmnt );

这和写$( select ).addClass( argmnt ), but we're able to conditionally determine which method will be called:$.fn.addClass, or$.fn.removeClass`是一样的。

您也可以在访问数组中的项目时看到这种方法：

var values = [ "Stack", "Overflow" ];
el.textContent = values[ (1 + values.indexOf( el.textContent )) % values.length ];

在这里，我们也在方括号内执行临时评估，而不是将结果存储在变量中，然后将其传入。

只要您的代码简洁明了，这还不算太糟糕。但要小心，事情很快就会失控，您的代码很快就会变得难以直观地解析，从而给您自己或项目的未来开发人员维护带来问题。