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.