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

This article mainly explains "what are the skills for using JavaScript". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the skills for using JavaScript?"

1. Filter unique valu

ES6 introduces Set objects and spread syntax. We can use them to create an array that contains only unique values

Const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [... new Set (array)]; console.log (uniqueArray); / / Result: [1,2,3,5]

Before ES6, it took more code to get the same array!

This technique supports arrays containing primitive types: undefined, null, boolean, string, and number. But if your array contains objects, functions, or other nested arrays, you can't use this method.

two。 Cache array length in a loop

This structure is generally recommended when we learn to use for loops:

For (let I = 0; I

In this way, the array length is repeatedly calculated at each iteration of the for loop.

Sometimes this can be useful, but in most cases, it would be better to cache the length of the array, which only needs to be calculated once. We can copy the array length to a variable called length, for example:

For (let I = 0, length = array.length; I

This code is similar to the one above, but from a performance point of view, even if the array becomes large, there is no need to spend extra runtime double-counting the array.length.

3. Short circuit evaluation

Conditional statements can be written quickly using ternary operators, such as:

X > 100? 'Below 100': 'Above 100': 'Below 100' (X > 200? 'Above 200':' Between 100-200'): 'Below 100'

But sometimes ternary operators are still complex, and we can use the logical operators & & and | | instead to make the code more concise. This technique is often referred to as "short circuit evaluation".

Suppose we want to return one of two or more options and use & & to return the first false. If the values of all operands are true, the value of the last expression is returned.

Let one = 1, two = 2, three = 3 Result console.log (one & & two & & three); / / Result: 3console.log (0 & & null); / / Result: 0

Use | | to return the first true. If the values of all operands are false, the value of the last expression is returned.

Let one = 1, two = 2, three = 3 Result console.log (one | | two | | three); / / Result: 1console.log (0 | | null); / / Result: null

Example 1

Suppose we want to return the length of a variable, but do not know the type of the variable.

We can use if/else to check whether foo is an acceptable type, but this can make the code very long. At this point, you can use short-circuit evaluation:

Return (foo | | []) .length

In both cases, if the variable foo has a length property, the value of this property will be returned, otherwise 0 will be returned.

Example 2

Have you ever had a problem accessing nested object properties? You may not know whether an object or a sub-attribute exists, so you will often encounter mistakes that give you a headache.

Suppose we want to access a property in this.state called data, but data is undefined. Calling this.state.data in some cases can cause App to fail to run. To solve this problem, we can use conditional statements:

If (this.state.data) {return this.state.data;} else {return 'Fetching Data';}

But this seems a bit verbose, and | | provides a more concise solution:

Return (this.state.data | | 'Fetching Data'); 4. Convert to Boolean value

Except for the standard Boolean values true and false, all values in JavaScript are either "true" or "false".

In JavaScript, except that 0, ", null, undefined, NaN, and false are false values, everything else is true.

We can use it! To switch between true and false.

Const isTrue =! 0th Const isFalse =! 1x Const alsoFalse =!! 0x console.log (true); / / Result: trueconsole.log (typeof true); / / Result: "boolean" 5. Convert to string

To quickly convert a number to a string, we can use the + operator, followed by an empty string.

Const val = 1 + "; console.log (val); / / Result:" 1 "console.log (typeof val); / / Result:" string "6. Convert to a number

To convert a string to a number, you can also use the + operator.

Let int = "15"; int = + int;console.log (int); / / Result: 15console.log (typeof int); Result: "number"

You can also use this method to convert Boolean values to numbers, for example:

Console.log (+ true); / / Return: 1console.log (+ false); / / Return: 0

In some cases, the + operator is resolved as a join operation rather than an addition operation. In this case, you can use two tilde: ~.

A tilde indicates a bitwise inverse operation, for example, ~ 15 equals-16.

Const int = ~ "15" console.log (int); / / Result: 15console.log (typeof int); Result: "number"

Using two tilde signs can be reversed again, because-(- nmur1) = naugh1-1cm n, so ~-16 equals 15.

7. Fast power operation

Starting with ES7, you can use * * for exponentiation, which is much faster than using Math.power (2pr 3).

Console.log (2 * * 3); / / Result: 8

But be careful not to confuse this operator with ^, which is usually used to represent an exponential operation, but in JavaScript, ^ represents a bitwise XOR operation.

Before ES7, you can use the bit left shift operator

The following expressions are equivalent: Math.pow (2, n); 2

For example, 2

8. Fast rounding

We can use Math.floor (), Math.ceil (), or Math.round () to convert floating-point numbers to integers, but there is another faster way, even with bits or operators.

Console.log; / / Result: 23console.log (- 23.9 | 0); / / Result:-23

| the actual behavior of the operands depends on whether the operands are positive or negative, so make sure you know whether the operands are positive or negative when using this operator.

If n is positive, then n | 0 is rounded down, otherwise it is rounded up. It removes the decimal part and can also use ~ ~ to achieve the same effect.

Remove integer trailing digits

| operator can also be used to remove the trailing number of an integer, so that it does not need to be like this:

Let str = "1553"; Number (str.substring (0, str.length-1))

Instead, we can do this:

Console.log (1553 / 10 | 0) / / Result: 155console.log (1553 / 1000 | 0) / / Result: 15console.log (1553 / 1000 | 0) / / Result: 19. Automatic class binding

In ES6, we can use arrows for implicit binding, which saves some code for the class constructor and says goodbye to recurring expressions, such as this.myMethod = this.myMethod.bind (this).

Import React, {Component} from React;export default class App extends Compononent {constructor (props) {super (props); this.state = {};} myMethod = () = > {/ / This method is bound implicitly!} render () {return ({this.myMethod ()})}; 10. Intercept array

If you want to remove some elements from the end of an array, you can use a faster method than splice ().

For example, if you know the size of the initial array, you can redefine its length property as follows:

Let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4 × console.log (array); / / Result: [0, 1, 2, 3]

This is obviously a more concise solution. However, I find that slice () runs faster, so if you value speed more, you can do something like this:

Let array = [0,1,2,3,4,5,6,7,8,9]; array = array.slice (0,4); console.log (array); / / Result: [0,1,2,3] 11. Get the last element of the array

The slice () method of an array can take a negative integer and get the element starting at the end of the array.

Let array = [0,1,2,3,4,5,6,7,8,9]; console.log (array.slice (- 1)); / / Result: [9] console.log (array.slice (- 2)); / / Result: [8,9] console.log (array.slice (- 3)); / / Result: [7,8,9] 12. Format JSON

You may have used JSON.stringify before, but did you know that it can also be used to add indentation to JSON?

The stringify () method can take two additional arguments, one is the function (the formal parameter is replacer), which is used to filter the JSON to be displayed, and the other is the number of spaces (the formal parameter is space).

Space can be an integer that represents the number of spaces, or a string (such as''for tabs), so the resulting JSON is easier to read.

Console.log (JSON.stringify ({alpha: 'apprentice, beta:' B'}, null,')); / / Result://'{/ / "alpha": a ~ * Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.