jquery - "Complex"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。

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

有关括号表示法的更多信息

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

我们还可以使用括号表示法进行内联计算或保存变量:

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

这与编写 $( select ).addClass( argmnt ) 相同，但我们能够有条件地确定将调用哪个方法:$.fn.addClass，或者$.fn.removeClass`。

您可能还会在访问数组中的项目时看到这种方法:

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

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

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