Zero, preface,

While looking at corporate bosses’ code recently, I discovered a number of interesting operators, some of which I have seen and used before, but also many of which I have not, and the skillful use of some operators can speed up development and make code more elegant. For the record.

Since there are so many JavaScript operators, I’ll take a look at some of the other operators that are interesting to use in real projects.

The exclamation point operator

1. An exclamation point!

Convert variables to Boolean type (invert), where null, undefined, 0, NaN, false, and the empty string “” are all converted to true, and the rest to false. (Note that the string ‘0’ is also false.)

! null; // true ! undefined; // true ! 0; // true ! NaN; // true ! false; // true ! "'; // true ! '0'. //false ! 123; //false ! 'a'; //false ! []; //false ! {}; //false ! (function(){}); // falseCopy the code

2. Two exclamation points!!!!!

Two exclamation points!! Used to make type judgments, can be seen as in the first step! (variable) then do the logical inverse operation, the rule is as follows:

  • undefined 和 nullBe judged asfalse;
  • Any reference data type is judged to betrue, whether it is an empty array or an empty object, etc.
  • String type. Empty strings are judged to befalse, others aretrue;
  • Numeric type,0 和 NANWould be judged to befalseAnd the rest fortrue;
  • Note: String'0'Would be judged to betrue.

3. Three exclamation points

Three exclamation points!! And no special use, is generally due to!! Boolean, add one! Is the inverse of this.

The question mark operator

1. Optional chain? .

This is a new JavaScript feature that eliminates the need to check for null and undefined at every level when accessing nested properties of JavaScript objects.

The operator was discovered when looking at the big guy code and encountering the statement res? .data? .list, immediately felt very interesting, after querying and testing, found that this is the same statement as res && res.data && res.data.list.

In general, this statement is intended to solve the problem of accessing multi-layer object properties (such as res.data.list) and reporting a reference error if the property res.data is empty.

Use? Far more beautiful and understandable than &&.

let data = res? .data? .list; // => equivalent to let data = res &&res.data &&res.data.list;Copy the code

Reference: MDN optional chain operator

2. Double question mark??

When we need for a variable assignment, and worry about assigning value is not valid, we will use | | (such as: the let arr = XXX | | []), but using | | may encounter ‘and the situation of the zero assignment failure, then you can use?? .

Null-value merge operator (??) Is a logical operator that returns the right-hand operand if the left-hand operand is null or undefined, otherwise returns the left-hand operand.

Reference: MDN null value merge operator

Positional operators and logical operators

1. Binary or|

Using binary operator |, before and after the first will | variable into binary, then the binary arithmetic, as long as there is 1 to 1, the same bit 0 otherwise.

2. Logic or||

Front to false, as long as the | | whatever | | behind is true or false, return | | at the back of the value.

Front is true, as long as the | | whatever | | behind is true or false, return | | the previous value.

3. Binary and&

Using the binary operator &, the variables before and after the & are first converted to binary, and then the binary operation is performed. Only the two digits of the same bit are 1, otherwise it is 0.

4. Logic and&&

As long as am& is preceded by false, the result will return the value before it regardless of whether it is followed by true or false.

As long as am& is preceded by true, the result returns the value after am& regardless of whether it is followed by true or false.