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

In this issue, Xiaobian will bring you tips about JavaScript. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.

1. Filter unique values

Set type is new in ES6, it is similar to array, but the member values are unique, no duplicate values. Associative extension operators (...) We can create a new array that filters duplicate values from 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 to implement this feature.

The scope of this technique is that the values in the array are of type undefined, null, boolean, string, number. When it comes to object, function, array, it doesn't apply.

2. Short-Circuit Evaluation

Three-eye operators are a convenient and quick way to write simple logical statements,

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

However, sometimes when logic is complex, ternary operators can be difficult to write legibly. At this point, we can use logical AND (&&) and logical OR (||operator to rewrite our expression.

The logical AND and logical OR operators always evaluate their operands first, and solve their right operands only if the value of the left operand alone cannot determine the result of the logical expression. This is called Short-Circuit Evaluation.

working principle

The and (&&) operator returns *** false/'falsy'. When all operands are true, *** the result of an expression is returned.

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

or (||The) operator will return *** true/'truthy' values. When all operands are false, *** the result of an expression is returned.

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

Scenarios

When we request data from the server, we use the data in another location, but the state of the retrieved data is unknown, e.g. we access the data property of this.state. According to the conventional way, we will first judge the validity of this this.state.data, and then distinguish them according to the validity.

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

But we can simplify this logical process in the above way

return (this.state.data || 'Fetching Data');

This method was found to be simpler and more convenient.

3, conversion Boolean type

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

Except for 0,"", null, undefined, NaN and false, we can think of everything else as 'truthy'.

We can use the negative operator! Convert a list of variables to boolean.

const isTrue = ! 0; const isFalse = ! 1; const alsoFalse = !! 0; console.log(isTrue); // Result: true console.log(typeof true); // Result: "boolean"

4, conversion String type

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

const val = 1 + ""; console.log(val); // Result: "1" console.log(typeof val); // Result: "string"

5. Convert Number Type

And corresponding to the above, we can use the addition operator + to convert a variable of type string back to a variable of type number.

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

In some contexts,+ will be interpreted as a concatenation operator rather than an addition operator. When this happens (you want to return an integer, not a floating point), you can use two tilde signs:~~. (Note that English format is required)

A tilde ~, called the bitwise not operator, is equivalent to- n - 1. So ~15 = -16.

Use two ~~ valid negation operations. This is because- (- n - 1) - 1 = n + 1 - 1 = n. That means ~-16 = 15

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

6, fast power

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

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

This should not be confused with the ^sign, which is usually used to represent exponents, but in JavaScript is the bitwise XOR operator.

Before ES7, shorthand for powers relied primarily on the bit-left shift operator.

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.