在方括号中使用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'的重复也不是最佳的。
• 的性能即可。第二个更有可能被优化（因为静态方法名称），这是真的。但是对于您的执行速度几乎没有可测量的影响，因为最重要的工作是在DOM中完成的。无论如何，你不是在性能关键部分使用这段代码。 （是吗？然后是基准）。

---

虽然有一种完全不同且更好的第三种方式：使用toggle method of classlists。它确实需要第二个参数来完成您想要做的事情：

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

这是为这个非常常见的案例而发明的！不可否认，由于许多开发人员不知道toggle做了什么，因此可读性更差。