preface

Q: What does a question mark mean?

A: The colon can be used as a ternary operator.

Q: Anything else?

A: Used in the evaluation of the object, that is the optional chain;

Q: What about two question marks?

Answer: The double question mark operator.

Q: What about multiple question marks?

A: That’s Yang Shaoxia!

Ternary operator

The ternary operator Boolean? TrueValue: falseValue, which is the js base operator.

isMrYoung ? 'yes' : 'no'
Copy the code

The ternary operator returns the value after the question mark if it is true, or the value after the colon otherwise. Not much to be said.

Optional chain

If there is a User object:

{
  "name": "kaiser"."hobby": {
    "sports": {
      "summer": "basketball"."winter": "sleep"}}}Copy the code

We want to get a player’s favorite summer sport, which should be User.hobby. Sports. Summer. It’s not a problem. Judge a wave.

if (user && user.hobby && user.hobby.sports && user.hobby.sports.summer) {
  return user.hobby.sports.summer
}
Copy the code

It’s a little long, it’s only three levels, it’s more exciting if you go deeper. No, go again!

try {
  return user.hobby.sports.summer
} catch(e) {
  return undefined
}
Copy the code

This solves any length of hierarchy once and for all, but it’s not elegant enough. No, try again!

import get from 'lodash/get'

const result = get(user, 'hobby.sports.summer')
Copy the code

As soon as any link fails, undefined is returned, but this requires the use of third-party libraries, which is not elegant. No, try again!

Offering a killer mace, optional chain:

returnuser? .hobby? .sports? .summerCopy the code

In the above example, if one of the attributes is null or undefined, the error is not reported. Instead, undefined is returned.

{
  "hobby": {}} {"hobby": null
}

{
  "hobby": {
    "sports": "basketball"}}Copy the code

So the return value is undefined.

There are several ways to write the optional chain:

obj? .prop// User? .hobby? .sportsobj? .[expr]// The square brackets of the object determine user? .['hobby']? .['sport']arr? .[index]// Array judge userList? . [12]? .namefunc? .(args)// select * from user. .run?.('1hours')
Copy the code

Check out the compatibility:

If you use Bable to compile your code, feel free to use it. @babel/plugin-proposal-optional-chaining

The double question mark operator

If we want to assign A variable A to B, but if B has no value, we want A to have A default value, we might write:

const a = b || 'defaultVale'
Copy the code

The problem is, if b is a number 0 or false, then you don’t get what you want, a becomes ‘defaultValue’, and then you probably want that 0 or false

We can solve this problem with the double question mark operator:

const a = b ?? 'defaultValue'
Copy the code

Default ‘defaultValue’ is assigned to a only if a is undefined or null, otherwise the value of B will be returned.

cosnt b = 0
const a = b ?? 'default' // a === 0

const b = false 
cosnt a = b ?? 'default' // a === false
Copy the code

NICE~

I don’t know if three question marks are put together.

constresult = a? .b ??true ? 'd' : 'f'
Copy the code

conclusion

In order to make your JS more elegant, quickly use it. Of course, don’t make complicated combinations in order to show off your skills, or you may end up with a colleague with a question mark.