JavaScript重构技巧 — 数组，类名和条件

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

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

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

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://levelup.gitconnected....

---

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。