This is the 9th day of my participation in Gwen Challenge

1. Introduction

My former partner’s colleague was ready to leave, and part of the work was handed over to me, such as codeReview. The topic of this article comes from codeReview, so take a look at the following code.

/ / this Demo is demonstration in WeChat small programs - to get first component instance, and then want to invoke the component method, simplified the following const ref = this. SelectComponent (` # comp `) | | null ref. The methods ()Copy the code

There are two problems with the above code:

  • The this.selectComponent()API is unsupported in very old versions and may report errors;
  • The ref object calls its methods without nulling;

Optimization scheme:

/ / expected: If any enclosing selectComponent would get component instance, otherwise returns null object is null. The const ref = this. SelectComponent && enclosing selectComponent (` # comp `) | | null ref && ref.methods()Copy the code

Write here, have a little confused, && and | | who use, at the same level of high priority? The following is mainly to solve this puzzle!

2. The operator

2.1 logic or (| |)

| | operators: condition 1 | 2 | conditions

  • If condition 1 is true, condition 1 is returned, and condition 2 code is not executed;
  • If the condition is false, regardless of the | 1 | behind is true or false, are returning to | | at the back of the value, namely the return condition 2;
console.log(0||''); // '' console.log(''||0); / / 0Copy the code
2.2 Logic and (&&)

&& operator: condition 1 && condition 2

  • The value of condition 1 is returned if condition 1 is false and whether condition 2 is true or false;
  • If condition 1 is true, the value of condition 2 is returned regardless of whether condition 2 is true or false;
console.log(0&&''); // 0 console.log(''&&0); / /"Copy the code

Logic | | with && do short circuit principle, just make sure sign in front of the true and false, and determined the return value.

3. The priority

If && and | | appeared at the same time, whose priority is higher?

console.log(1 || 'a' && 2); // 1 console.log('a'&& 2 || 1); / / 2Copy the code

Assumption | | priority not under &&, so the above code expected return 2, and 1 is not in conformity with the actual verification results, therefore, the conclusion is not established.

The official explanation: && operator priority is higher than | | operators.

Note: in order to increase the readability of the code, if involves the multistage | | / && judgement, advice, and increase the code readability with (). Something weird happens that upends this argument:

true || alert(2) && false; / / the result is true, alert (2) does not perform if / / in accordance with the above && operator | | operators, then should alert (2), then the result is true, but inconsistent results with the actual code to run, so can be overturnedCopy the code

Therefore, after comprehensive study, the following conclusion should be more accurate, but still maintain a small state of confusion oh, welcome the big guys to give advice ~

If encounter | | operators, expression to compute the first results, if the result is true, will not execute the right of expression/short circuit operation effect; If the result is false, then go to execute the right of expression, and according to the results performed on both sides of the | | operator.

4. Write at the end

If there is a mistake, please leave a message, will be corrected in time! If feel helpful to you, please click a like or collect it!