Shulou(Shulou.com)05/31 Report--

This article focuses on "how JavaScript uses logical assignment operators". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how JavaScript uses logical assignment operators.

Unconditional vs conditional

Mathematical operators, such as +, are unconditional.

In const x = 1 + 2, we always add LHS to RHS and assign the result to x anyway.

LHS and RHS are concepts in the field of mathematics, meaning left and right of the equation, which are the left and right sides of the assignment operator in our current scenario. When the variable appears to the left of the assignment operator, the LHS query is performed; vice versa, the RHS query is performed.

We can even write some strange code, such as const x = false + 2. JS first converts the LHS of false to Number, so you get const x = Number (false) + 2, and the result is const x = 0 + 2. It adds LHS to RHS and finally assigns it to x, resulting in 2.

Logical operators, such as & & are conditional

In const x = true & & 0 + 2, first calculate LHS, which is true. Because the value of LHS is true, we next run the RHS operation, which has a value of 2, as well as the assignment operation, and the result is 2.

Compared to const x = false & & 0 + 2, LHS is false, so RHS is completely ignored.

You may wonder why you want to avoid calculating RHS? Two common reasons are to get better performance and avoid side effects.

Binary logic operator

& & | |?

In JSX we often use & & and | | to render the interface conditionally. ?? Is the nullish (null value) merge operator, which was recently approved and will soon become popular. They are all binary logic operators.

Use & & to test whether the result of LHS is true.

Use | | to test whether the result of LHS is an imaginary value.

With?? Test whether the LHS is invalid.

Imaginary value vs Nullish

What are the imaginary values in JS?

Null

Undefined

False

NaN

0

"" (empty string)

The following two sisters are considered to be nullish values.

Null

Undefined

It is worth noting that using binary logic operators does not necessarily return a Boolean value, but rather the LHS or RHS value of the expression. To clarify the main points of these expression types, it is helpful to review this sentence in the ECMAScript document:

The resulting value is not necessarily Boolean, but one of the two Operand expressions.

Some examples

/ / & & / / if LHS is a true value, calculate and return RHS, otherwise return LHS true & & 100 percent 2 / / 10000 "Joe" & & "JavaScript" / / "JavaScript" false & & 100 percent 2 / / false "& & 100 percent 2 / / NaN null & 100 percent 2 / / null undefined & 100 percent 2 / / undefined

Logical assignment operator

& & = | =?

This operator combines assignment with conditional logic operator, so it is named * * "logical assignment" *? They are just an abbreviation, for example, x & & = y is an abbreviation for x & & (x = y).

The value returned from the logical assignment is not the updated assignment, but the value of the evaluated expression.

Because of previous ECMAScript features, such as default parameters and nullish merge operators, you can say that there must be some redundancy in the functionality provided by logical assignments. Although this shorthand looks smooth, I'm sure it will come in handy when we find more use cases.

Logic and assignment (&)

/ / Logic and LHS & & = RHS / / equivalent to LHS & & (LHS = RHS) / / case / / if x is truthy, assign x to y, otherwise return x / / if x is true, assign y to x, otherwise return x let x = 1 const y = 100x & & = y / / x is 100 / / the length corresponding to the above x & & (x = y)

Logic or assignment (| | =)

/ / Logic or LHS | | = RHS / / equivalent to LHS | | (LHS = RHS) / / case / / return x if x is true, otherwise assign y to x let x = NaN const y = 100x | | = y / / x is 100 / / the length corresponding to the above x | | (x = y)

Logical nullish assignment (?)

/ / logical nullish LHS? = RHS / / equivalent to LHS? (LHS = RHS) / / case / / if x.z is nullish, assign x.z to y let x = {} let y = 100; x.z? = y / / x is {z: 100} / / corresponding to the length above. (x.z = y)

An example of logical assignment in implementation

JSX in React

Let loading = true const spinner = loading & & = spinner

DOM

El [XSS _ clean] | | = 'some default'

Object

/ / if the object does not have an onLoad method, set a method const config = {}; config.onLoad? = () = > console.log ('loadedstones') const myObject = {a: {}} myObject.a | | = 'Achievement; / / ignored because the value of an in myObject is true myObject.b | | =' B' / / myObject.b will be created because it does not do anything because the myObject.c in myObject / / {/ / "a": {} / / "b": "B" / /} myObject.c & & ='Am I seen?'; / / is imaginary.

How to use logical assignment in a project

Chrome already supports logical assignment. For backward compatibility, use transformer. If you are using Babel, install the plug-in:

Npm install @ babel/plugin-proposal-logical-assignment-operators

And add the following content to .babelrc:

{"plugins": ["@ babel/plugin-proposal-logical-assignment-operators"]} at this point, I believe you have a better understanding of "how JavaScript uses the logical assignment operator". You might as well do it! 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.