Shulou(Shulou.com)06/03 Report--

In this issue, the editor will show you how to use javascript arrays instead of conditional statements and how to use classList to manipulate class names. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

JavaScript is an easy-to-learn programming language, and it's easy to write programs that run and perform certain operations. However, it is difficult to write a clean piece of JavaScript code.

Replace long expressions with array checks

In normal development, we may write the following code:

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

For the above, we can use some array methods to reduce the length of conditional expressions.

One way is to use the include method of the array:

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

If the value passed to the parameter is contained in the array instance, the include method returns true, otherwise it returns false.

Another method is to use the some method of the array:

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

Through the some method, we can check whether there are array elements with the given condition in the callback.

Returns true if one or more exists, false otherwise.

Use the classList attribute in the DOM element

The easiest way to check for classes in the DOM element and manipulate multiple classes is to use the classList attribute.

For example, if you want to add multiple classes, you can use the following ways:

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

In this way, we can add multiple classes without having to manipulate strings. We just get the classList attribute of the DOM element object, and then call add to add the class by passing a string with the class name to the add method.

The rendered DOM element now has foo,bar and baz classes.

Similarly, we can call the remove method of the classList property, which deletes the class using a string with the name of the class to be deleted.

For example, we can write like this:

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

To check whether the class name exists in the DOM element object, you can use the contains method.

For example, we can write like this:

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

The above determines whether the p element contains the baz class, because p does not contain the baz class, so it returns false.

The classList property also has a toggle method to switch classes (add or remove), such as the following code:

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

The bar class on p is added or removed each time the button is clicked.

The clasList property has an array-like iterable object called the DOMTokenList object. Therefore, we can use the expansion operator to convert it to an array and the clasList to an array of strings with the class name.

For example, we can write like this:

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

The final value of classArr above is ["foo", "bar"].

Once we have converted the DOMTokenList to an array, we can use any array method to manipulate the code.

We use the corresponding array method to optimize the long conditional statement with | | operation.

To manipulate multiple class names, we should use the classList attribute that is part of the DOM element object. In this way, we can add, remove, and switch classes without having to manipulate the string and set it to the className property ourselves.

This is how to use javascript arrays instead of conditional statements and how to use classList to manipulate class names. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.