JavaScript是一种易于学习的编程语言，很容易编写可以运行和执行某些操作的程序。但是，很难写出一段干净的JavaScript代码。在本文中，我们将学习如何使用数组代替条件语句，以及如何使用classList来操作类名。用数组校验代替长表达式在平时的开发中，我们可能会写这样的代码：if(fruit==='apple'||fruit==='orange'||fruit==='grape'){//...}对于上面，我们可以使用一些数组的方法来减少条件表达式的长度。一种方法是使用数组的include方法：if(['apple','orange','grape'].includes(fruit)){//...}如果传递给参数的值包含在数组实例，include方法返回true，否则返回false。另一种方式是使用数组的some方法：if(['apple','orange','grape'].some(a=>a===fruit)){//...}通过some方法，我们可以检查回调中是否存在具有给定条件的数组元素。如果存在一个或多个，则返回true，否则返回false。在DOM元素上使用classList属性检查某个类是否存在于DOM元素中并操作多个类的最简单方法是使用classList属性。例如，如果要添加多个类，可以使用如下方法：constp=document.querySelector('p');p.classList.add('foo');p.classList.add('bar');p.classList.add('baz');这样，我们可以在不操作字符串的情况下添加多个类。我们只是获取DOM元素对象的classList属性，然后通过将带有类名的字符串传递给add方法来调用add来添加类。现在，呈现的DOM元素具有类foo、bar和baz。同样，我们可以调用classList属性的remove方法，该方法接受一个带有要删除的类名的字符串来删除该类。例如，我们可以这样写：constp=document.querySelector('p');p.classList.add('foo');p.classList.add('bar');p.classList.add('baz');p.classList.remove('baz');要检查类名是否存在于DOM元素对象中，可以使用contains方法。例如，我们可以这样写：constp=document.querySelector('p');p.classList.add('foo');p.classList.add('bar');consthasBaz=p.classList.contains('baz');上面判断p元素是否包含baz类，因为p不包含baz类，所以返回false。classList属性还有一个toggle方法，意思是切换类（添加或删除），比如下面的代码：constp=document.querySelector('p');constbutton=document.querySelector('button');p。classList.add('foo');p.classList.add('bar');button.onclick=()=>{p.classList.toggle('bar');}每次点击按钮，上层p的bar类将被添加或删除。clasList属性有一个类似于数组的可迭代对象，称为DOMTokenList对象。因此，我们可以使用展开运算符将其转换为数组，将clasList转换为带有类名的字符串数组。例如，我们可以这样写：constp=document.querySelector('p');p.classList.add('foo');p.classList.add('bar');constclassArr=[...p.classList];上面classArr的最终值是["foo","bar"]。一旦我们将DOMTokenList转换为数组，我们就可以使用任何数组方法来操作代码。用||总结长条件语句运算符，我们使用相应的数组方法对其进行优化。要操作多个类名，我们应该使用属于DOM元素对象一部分的classList属性。这样我们就可以添加、删除和切换类，而无需自己操作字符串并将其设置为className属性。JohnAu-Yeung来源：medium译者：前端小智原文：https://levelup.gitconnected.com/javascript-refactoring-tips-making-functions-clearer-and-cleaner-c568c299cbb2本文转载自微信公众号《大举走向世界》，您可以通过以下二维码关注。转载请联系大千世界公众号。
