How to improve the skill of writing code in JavaScript

This article will explain in detail how to improve your coding skills in JavaScript. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. Filter unique values

The Set type is new in ES6 and is similar to an array, but the values of the members are unique and there are no duplicate values. Combined with the extension operator (.) we can create a new array to filter the repeated values of the original array.

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

Before ES6, we needed a lot more processing code if we wanted to do this. The scope of this technique is that the types of values in the array are: undefined, null, boolean, string, number. It is not applicable when object, function and array are included.

2. Short-circuit evaluation (Short-Circuit Evaluation)

Trinomial operator is a convenient and quick way to write some simple logical statements.

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

But sometimes when the logic is complex, the trinomial operator book can be difficult to read. At this point, we can rewrite our expression using logical and (&) and logical or (| |) operators.

Logic and and logic or operators always evaluate their operands first, and their right operands are solved only if the value of the left Operand alone cannot determine the result of the logical expression.

This is called short-circuit evaluation (Short-Circuit Evaluation) and the (& &) operator will return the value of the first false/'falsy'. When all operands are true, the result 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

Or the (| |) operator returns the value of the first true/'truthy'. When all operands are false, the result 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: examples of null2.1 scenarios

When we request data from the server, we use the data in another location, but the status of getting the data is not known, such as we access the data property of this.state.

According to the conventional way, we will first judge the effectiveness of the this.state.data, and then deal with it separately according to the effectiveness.

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

But we can abbreviate this logical process in the above way.

Return (this.state.data | | 'Fetching Data')

By comparison, it is found that this way is more concise and convenient.

3. Convert Boolean type

Regular Boolean values are only true and false, but in JavaScript we can think of other values as' truthy''or 'falsy'.

Except for 0, "", null, undefined, NaN and false, we can think of everything else as' truthy''. We can use the negative operator! Converts a series of variables to "boolean".

Const isTrue =! 0th Const isFalse =! 1x Const alsoFalse =!! 0x console.log (isTrue); / / Result: trueconsole.log (typeof true); / / Result: "boolean" 4, convert string type

We can convert a variable of type number to type string through the + concatenation operator.

Const val = 1 + "; console.log (val); / / Result:" 1 "console.log (typeof val); / / Result:" string "5, convert Number type

Corresponding to the above, we can convert a variable of type string back to type number by adding the operator +.

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

In some contexts, + is interpreted as a join operator, not an addition operator. When this happens (you want to return an integer instead of a floating point number), you can use two tilde: ~.

(note that in English format) A tilde ~, called the "bitwise non-operator", is equivalent to-n-1. So ~ 15 =-16. The use of two ~ ~ can effectively negate the operation. This is because-(- n-1)-1 = n + 1-1 = n. That is to say ~-16 = 15

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

Starting with ES7, we can use the power operator * * as an abbreviation for exponentiation, which is faster than the previous Math.pow (2, 3). This is a very simple and practical point, but most tutorials do not specifically cover it.

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

This should not be confused with the ^ symbol, which is usually used to represent an exponent, but is a bit XOR operator in JavaScript. Before ES7, the abbreviation of power relied mainly on the bit-left shift operator.