What are the JavaScript tips for Web front-end development

This article introduces the relevant knowledge of "what are the JavaScript tips for Web front-end development". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Replace all

We know that the string.replace () function only replaces what happens the first time.

You can replace everything that appears by adding / g to the end of the regular expression.

Var example = "potato potato"; console.log (example.replace (/ pot/, "tom")); / / "tomato potato" console.log (example.replace (/ pot/g, "tom")); / / "tomato tomato"

two。 Extract unique valu

By using the Set object and the expansion operator, we can create a new array with unique values.

Var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1] var unique_entries = [... new Set (entries)]; console.log (unique_entries); / / [1,2,3,4,5,6,7,8]

3. Convert a number to a string

We just need to use the concatenation operator with empty quotation marks.

Var converted_number = 5 + "; console.log (converted_number); / / 5 console.log (typeof converted_number)

4. Convert a string to a number

All we need is the + operator.

Note that it only applies to "string numbers".

The_string = "123"; console.log (+ the_string); / / 123the_string =" hello "; console.log (+ the_string); / / NaN

5. Randomly arranging elements in an array

I do this every day.

Var my_list = [1,2,3,4,5,6,7,8,9]; console.log (my_list.sort (function () {return Math.random ()-0.5})); / / [4,8,2,9,1,3,6,5,7]

6. Flattened multidimensional array

Just use the unfold operator.

Var entries = [1, [2, 5], [6, 7], 9]; var flat_entries = [] .concat (....); / / [1, 2, 5, 6, 7, 9]

7. Shorten conditional statement

Let's look at this example:

If (available) {addToCart ();}

Shorten it by simply using variables and functions:

Available&&addToCart ()

8. Dynamic attribute name

I always thought that an object had to be declared before dynamic properties could be assigned.

Const dynamic = 'flavour'; var item = {name:' Coke', [dynamic]: 'Cherry'} console.log (item); / / {name: "Coke", flavour: "Cherry"}

9. Adjust / empty the array using length

We basically covered the length of the array.

If we want to resize the array:

Var entries = [1,2,3,4,5,6,7]; console.log (entries.length); / / 7 entries.length = 4; console.log (entries.length); / / 4 console.log (entries); / / [1,2,3,4]

If we want to empty the array:

Var entries = [1, 2, 3, 4, 5, 6, 7]; console.log (entries.length); / / 7 entries.length = 0; console.log (entries.length); / / 0 console.log (entries); / / [] what are the JavaScript tips for Web front-end development? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!