如何使用javascript數(shù)組來代替條件語句以及如何使用classList操作類名。

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何使用javascript 數(shù)組來代替條件語句以及如何使用classList操作類名。，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

湯旺網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司成立于2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

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

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

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

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

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

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

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

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

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

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

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

如果存在一個或多個，則返回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屬性，然后調(diào)用add通過將帶有類名的字符串傳遞到add方法中來添加類。

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

同樣，我們可以調(diào)用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 類，因?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 類就會添加或者移除。

clasList屬性有一個類似數(shù)組的可迭代對象，稱為DOMTokenList對象。因此，我們可以使用展開操作符將其轉(zhuǎn)換為數(shù)組，將clasList轉(zhuǎn)換為一個帶有類名的字符串?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)換為一個數(shù)組，那么我們就可以使用任何數(shù)組方法來操作代碼。

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

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

上述就是小編為大家分享的如何使用javascript 數(shù)組來代替條件語句以及如何使用classList操作類名。了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：如何使用javascript數(shù)組來代替條件語句以及如何使用classList操作類名。
URL分享：http://muchs.cn/article32/pidepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、用戶體驗(yàn)、、建站公司、移動網(wǎng)站建設(shè)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)