1. Optional Chain Operators
Previously, when we wanted to use a property with a deeper structure, and we couldn’t be sure that all the parents must exist, we needed to make a series of judgments, such as a data structure.
When we want to get the value of the innermost math property.
1.1 Getting deep properties
But when we use the optional chain operator, the judgment is much easier. The optional chain operator will return undefined directly when it encounters null or undefined on the link, without throwing an error exception.
1.2 Executing an optional method
It can also be used when executing a function that may exist. For example a react component where the method passed in is optional.
Or we can use it when we execute a method on a dom element.
document.querySelector returns two types, when the dom element is real and null otherwise, and anyone who has written typescript knows that when we want to call a method, we always need to make sure the dom element exists first.
When using the optional chain operator, it is sufficient to call directly.
1.3 Getting the value in an array
If the array exists, get the value of some subscript. We don’t need to determine whether the array exists now, we can just use it.
The above 3 cases can also be used in combination. If a structure is complex and has various types, here we have to execute the method of subscript 2 of the array math.
1.4 Assignment is not possible
The optional chain operator can only perform get operations, not assignments.
For example, if you assign a value to a possible array or dom element, a syntax exception will be thrown directly.
When we execute the above statement, the following prompt will be thrown.
That is, you cannot assign a value to the optional chain on the left side.
2. The double question mark operator
The double question mark operator
?, as I understand it, is designed to solve the or operator
Let’s review the operation of the or operator. When the data on the left side is a false value (number 0, boolean false, empty string, undefined, null), then the statement on the right side is executed.
However, there are cases where both false and 0 are normal values, but when using the or operator, this can lead to errors.
For example, in the example below, when score is empty, the default value is 1. When the normal value of 0 is entered, it should return 0 (but it actually returns 1).
This is where we use the double question mark operator
? . The double question mark operator will only execute the right-hand side of the statement if the left-hand side is undefined or null.
Also, the double question mark operator can be combined with = as an assignment operation that assigns the result of the right-hand statement to the left-hand variable when the left-hand side is null or undefined.
3. The & and | assignment operations
We wrote it like this when we used the or operator for assignment operations before.
Now you can just shorten it to this.
4. The double asterisk operator
The double asterisk operator
** was introduced to js earlier, but we don’t use it as much. It actually performs a power operation, which is equivalent to
All the above samples have been run on chrome90.