在方括号中使用classList方法

Question

将classList方法放在方括号内是否被认为是一种好习惯？ 我的意思是，有时候我更喜欢这样做：

elem.classList[ifTrue ? 'add' : 'remove']('className');

相对于：

if (ifTrue) {
    elem.classList.add('className');
} else {
    elem.classList.remove('className');
}

另外，使用方括号是否会对代码执行的性能/速度产生影响？

Answer 1

将classList方法放在方括号内是否被认为是一种好习惯？

没什么错。 它更短，更简洁，没有代码重复。 如您所说，有时您会更喜欢它-如果您知道何时使用和何时不使用，那就很好。 这些因素是：

可读性 。 很多基于意见的。 我喜欢，其他人不喜欢。 了解您的观众，我不会建议新手使用。
可维护性 。 当可能需要根据ifTrue完成其他事情时，我将选择if-else。 另一方面， elem.classlist和'classname'的elem.classlist也不是最优的。
表现。 第二个更有可能被优化（因为静态方法名称），这是事实。 但是，由于最重要的工作是在DOM中完成的，因此对您的执行速度几乎没有可衡量的影响。 无论如何，您不会在性能至关重要的部分中使用这段代码。 （是吗？然后进行基准测试）。

但是，还有一种完全不同且更好的第三种方法：使用classlists的toggle方法。 它确实需要第二个参数，它可以完成您想做的事情：

elem.classList.toggle('className', ifTrue);

它是为这种非常常见的情况而发明的！ 诚然，由于许多开发人员不知道toggle是什么，因此可读性更差。