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和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。