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属性。

例如，如果要添加多个类，可以使用下面方式：

const p = 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方法，该方法使用一个带有要删除的类名的字符串来删除该类。

例如，我们可以这样写：

const p = document.querySelector(p); p.classList.add(foo); p.classList.add(bar); p.classList.add(baz); p.classList.remove(baz); 

要检查 DOM 元素对象中是否存在类名，可以使用contains方法。

例如，我们可以这样写：

const p = document.querySelector(p); p.classList.add(foo); p.classList.add(bar); const hasBaz = p.classList.contains(baz); 

上面判断 p 元素是否包含 baz 类，因为 p 没有包含 baz类，所以返回false。亿华云

classList属性还有toggle方法，表示切换类(添加或者移除)，例如下面的代码：

const p = document.querySelector(p); const button = document.querySelector(button); p.classList.add(foo); p.classList.add(bar); button.onclick = () => {    p.classList.toggle(bar); } 

每点击一次按钮，p 的上 bar 类就会添加或者移除。

clasList属性有一个类似数组的可迭代对象，称为DOMTokenList对象。因此，我们可以使用展开操作符将其转换为数组，将clasList转换为一个带有类名的字符串数组。

例如，我们可以这样写：

const p = document.querySelector(p); p.classList.add(foo); p.classList.add(bar); const classArr = [...p.classList]; 

上面 classArr 最终值为[“foo”, “bar”]。

一旦我们将DOMTokenList转换为一个数组，那么我们就可以使用任何数组方法来操作代码。

总结

带有 || 操作的长条件语句，我们使用对应数组方法来进行优化。

要操作多个类名，我们应该使用作为DOM元素对象一部分的classList属性。通过这种方式，我们可以添加、删除和切换类，而不需要操作字符串并自己将其设置为className属性。

John Au-Yeung 来源：medium 译者：前端小智

原文：https://levelup.gitconnected.com/javascript-refactoring-tips-making-functions-clearer-and-cleaner-c568c299cbb2

本文转载自微信公众号「 大迁世界」，可以通过以下二维码关注。转载本文请联系 大迁世界公众号。