Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the 11 JavaScript tips that have been ignored

2025-01-15 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

What are the 11 JavaScript tips that have been ignored? For this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem find simpler and easier ways.

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.

Short-Circuit Evaluation

The ternary operator is 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.

(1)working principle

The AND (&&) operator returns the first false/'falsy' value.

When all operands are true, the result of the last 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 returns the first true/'truthy' value.

When all operands are false, the result of the last expression is returned.

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

(2)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.

conversion Boolean

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"

Convert 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"

Convert Number Type

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

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 is ~-16 = 15

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

Fast exponentiation

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report