JavaScript 是一種易于學(xué)習(xí)的編程語(yǔ)言，編寫運(yùn)行并執(zhí)行某些操作的程序很容易。然而，要編寫一段干凈的JavaScript 代碼是很困難的。

[[329242]]

在本文中，我們學(xué)習(xí)如何使用數(shù)組來(lái)代替條件語(yǔ)句，以及如何使用classList操作類名。

用數(shù)組檢查替換長(zhǎng)表達(dá)式

平時(shí)開發(fā)中，我們可能會(huì)寫如下的代碼：

if (fruit === 'apple' || fruit === 'orange' || fruit === 'grape') { 
  //... 
} 

對(duì)于上面，我們可以使用一些數(shù)組方法來(lái)減少條件表達(dá)式的長(zhǎng)度。

一種方法是使用數(shù)組的include方法:

if (['apple', 'orange' ,'grape'].includes(fruit)) { 
  //... 
} 

如果傳遞給參數(shù)的值包含在數(shù)組實(shí)例中，include方法返回true，否則返回false。

另一種方法是使用數(shù)組的some方法:

if (['apple', 'orange', 'grape'].some(a => a === fruit)) { 
  //... 
} 

通過(guò)some方法，我們可以檢查回調(diào)中是否存在具有給定條件的數(shù)組元素。

如果存在一個(gè)或多個(gè)，則返回true，否則返回false。

在 DOM 元素中使用 classList 屬性

檢查 DOM 元素中是否存在類并操作多個(gè)類的最簡(jiǎn)單方法是使用classList屬性。

例如，如果要添加多個(gè)類，可以使用下面方式：

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

這樣，我們可以添加多個(gè)類而無(wú)需操作字符串。我們只是獲得DOM元素對(duì)象的classList屬性，然后調(diào)用add通過(guò)將帶有類名的字符串傳遞到add方法中來(lái)添加類。

現(xiàn)在，渲染的DOM元素具有foo，bar和baz類。

同樣，我們可以調(diào)用classList屬性的remove方法，該方法使用一個(gè)帶有要?jiǎng)h除的類名的字符串來(lái)刪除該類。

例如，我們可以這樣寫：

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

要檢查 DOM 元素對(duì)象中是否存在類名，可以使用contains方法。

例如，我們可以這樣寫：

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

上面判斷 p 元素是否包含 baz 類，因?yàn)?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'); 
} 

每點(diǎn)擊一次按鈕，p 的上 bar 類就會(huì)添加或者移除。

clasList屬性有一個(gè)類似數(shù)組的可迭代對(duì)象，稱為DOMTokenList對(duì)象。因此，我們可以使用展開操作符將其轉(zhuǎn)換為數(shù)組，將clasList轉(zhuǎn)換為一個(gè)帶有類名的字符串?dāng)?shù)組。

例如，我們可以這樣寫：

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

上面 classArr 最終值為[“foo”, “bar”]。

一旦我們將DOMTokenList轉(zhuǎn)換為一個(gè)數(shù)組，那么我們就可以使用任何數(shù)組方法來(lái)操作代碼。

總結(jié)

帶有 || 操作的長(zhǎng)條件語(yǔ)句，我們使用對(duì)應(yīng)數(shù)組方法來(lái)進(jìn)行優(yōu)化。

要操作多個(gè)類名，我們應(yīng)該使用作為DOM元素對(duì)象一部分的classList屬性。通過(guò)這種方式，我們可以添加、刪除和切換類，而不需要操作字符串并自己將其設(shè)置為className屬性。

John Au-Yeung 來(lái)源：medium 譯者：前端小智

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

本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 大遷世界公眾號(hào)。