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

In this issue, the editor will bring you about the optional chain operator (?) The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

What is the optional chain operator (?)

Optional chain operator (?) Allows you to read the value of a property deep in the chain of connected objects without explicitly verifying that each reference in the chain is valid.

For example, think about an object obj that has a nested structure. Without using an optional chain, when looking for a deeply nested sub-attribute, you need to validate references between them, such as:

Let nestedProp = obj.first & & obj.first.second

To avoid reporting errors, make sure that the value of obj.first is neither null nor undefined before accessing obj.first.second.

If you only access obj.first.second directly without validating obj.first, it is possible to throw an error.

With the optional chain operator (?.), you no longer need to explicitly verify the status of the obj.first.second before accessing the obj.first, and then use the short-circuit calculation to get the final result:

Let nestedProp = obj.first?.second

This is equivalent to the following expression, but no temporary variable is actually created:

Let temp = obj.first; let nestedProp = ((temp = = null | | temp = undefined)? Undefined: temp.second)

?. The function of the operator is similar to. Chain operator, the difference is:

It does not cause an error if the reference is nullish (null or undefined). The expression short circuit returns a value of: undefined.

When used with a function call, returns undefined if the given function does not exist.

When trying to access object properties that may not exist, using the optional chain operator will make the expression shorter and more concise.

There are two points we need to pay attention to:

If there is a property name and it is not a function, use?. A TypeError exception (x.y is not a function) is still generated.

Let result = someInterface.customMethod?. ()

If the someInterface itself is null or undefined, the exception TypeError will still be thrown.

If you want to allow someInterface to also be null or undefined, then you need to write someInterface?.customMethod?. () like this

Optional chain cannot be used for assignment

Let object = {}; object?.property = 1; / / Uncaught SyntaxError: Invalid left-hand side in assignment

How to enable this feature

/ / install npm install-- save-dev @ babel/plugin-proposal-optional-chaining / / babel config {"plugins": ["@ babel/plugin-proposal-optional-chaining" / / optional chain "@ babel/plugin-proposal-nullish-coalescing-operator", / / a double question mark]} optional chain operator (?) How const a = {b: 1}; console.log (axi.b)

Will be converted to:

Const a = {b: 1}; console.log (a = null? Void 0: A.B)

If the level is deeper, a temporary variable is created to record:

Const a = {b: {c: 1, d: 2,}}; console.log (a?.b?.c)

Will be converted to:

Var _ astatb; const a = {b: {c: 1, d: 2}}; console.log (a = null | | a = void 0? Void 0: (_ aqb = a.b) = null | | _ aqb = void 0? Void 0: _ a$b.c)

Some related materials released by Heny

Heny, who is currently in charge of the babel project, has previously posted an article about the current babel dilemma: how difficult is it for a celebrity open source project to survive? Babel, used by millions of people, is in financial trouble

The above is the optional chain operator (?) shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.