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

Which tips can change the way to access JavaScript nested objects, this article describes in detail the corresponding analysis and solutions, hoping to help more partners who want to solve this problem to find a more simple and easy way.

JavaScript is known for its many skills, and it is almost impossible to know all of JavaScript's skills. Recently, while browsing the relevant documents and topics of JavaScript, I found another function point that I had never seen before. I'm probably not the last person to learn this skill, so I'd like to share it with you. It completely changes the way I access nested objects! I hope it can help you.

Sports Acrobatics

This technique is called optional chain. It is actually an operator, written as?. According to the Mozilla Web site file, the optional chain operator allows you to read the values of properties deep in the chain of connected objects without explicitly verifying that each reference in the chain is valid. In short, the optional chain operator greatly simplifies access to nested objects. Looking directly at this example will help you better understand the role of optional chain operators. If you have an object "house" as follows:

Const house = {price: 1000000, currency: USD, address: {city: New York, street: Main street, postal_code: 1234 AB, state: {name: New York, abbreviation: N.Y.}}, owner: {name: "John Doe"}}

Object properties are typically accessed as follows:

Const currency = house.currency const price = house.price const owner = house.owner.name

This is the basis for reading the value of the object. What if the house doesn't have an owner? We will not be able to read named attributes that do not exist, and the last line of code will cause an error. To make up for this, do this:

Const owner = house.owner? House.owner.name: null

Experts can use the null merge operator:

Const owner = house.owner.name? Null

The problem with this code is that even if the object of the house does not have an owner, it will not stop running. Look at the following example:

Const house = {price: 1000000, currency: USD, address: {city: New York, street: Main street, postal_code: 1234 AB, state: {name: New York, abbreviation: N.Y.}}, owner: null}

Using the null merge operator causes an error because it cannot read the empty name (name) in the attribute. You can run the first example using the ternary operator. But if the properties you are exploring are multi-layer nested and need to be checked for existence one by one, the code can be lengthy and unreadable. For example, check the state in which you are located:

Const state = house.address & & house.address.state? House.address.state.name: null

As you can see, this line of code becomes too long to read. This is where the optional chain operator comes in handy. With it, it is no longer necessary to check the existence of a property, thus keeping the code simple and easy to understand. Returns "undefined" if the property does not exist. The operator actually looks like this:

Const city = house?.address?.city / / "New York" const nonExisting = house?.roof?.material / / Undefined const househouseNumber = house?.address?.number / / Undefined const state = house?.address?.state?.abbreviation / / "N.Y."

Does it suddenly become very concise and clear!

Image source: unsplash

Example 1 attempts to explore the value of the "city" attribute under the "address" attribute. Because this property exists, the "city" property will be returned, just like using house.address.city to get the value. Example 2 attempts to obtain information about the building materials of the roof (roof). However, there is no "roof" property under the "house" object, so "undefined" is returned, and the "houseNumber" property is the same. Although the "house" object has a "address" property, this property does not contain a "number" property-- which is why "undefined" is returned here. You can also use the optional chain operator to dynamically query properties, where you need to use parentheses:

Const someProperty = obj?. [property- + propertyName]

It can also be used with the null merge operator. If you want to set a default value for a variable, the example is as follows:

Const ownerName = house?.owner?.name? "Unknownowner"

Function

Currently, you just combine the optional chain operator with the object. But it can also be used in conjunction with functions. Can be used to call methods that don't exist, like this:

Const result = someObject.customMethod?. ()

Adaptation

Older browsers (such as IE browsers) do not support optional chain operators, just like other modern JavaScript function points. New browsers such as Google, Firefox, Opera and Safari all support optional chains, but this does not hinder the use of optional chains, and you can add polyfill to your browsers as needed.

Use the optional chain operator to access objects deep in the link without confirming that each reference in the nested object is valid. Its biggest advantage is that it runs succinctly and beautifully, not only for objects, but also for calling methods that may not exist.

Keep in mind, however, that it doesn't work in IE browsers-- just like other modern JavaScript function points. These older browsers need to add polyfill to run the optional chain.

This is the answer to the question about which tips can change the way you access JavaScript nested objects. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.