Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use Javascript operators", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to use Javascript operators"!

1 Operator base

1.1 Priority: The operator with the highest priority is executed first

Question: 1|| 1 ? 2 : 3 ; Answer: 2 Analysis:|| High priority is equivalent to: (1)|| 1 ）? 2 : 3 instead of: 1|| （1 ? 2 : 3 ）

1.2 Associativity: The direction in which an operator executes. Left to right or right to left?

Question: +function (){var a = b = 1;}(); console.log(b); console.log(a); answer: 1 error Resolution: assignment from right to left, var a = b = 1 so equivalent to b = 1; var a = b; then some students may ask, why not? var b = 1; var a = b; remember variable elevation? var a = b = 1; when a variable is promoted, only a is declared, and b in the assignment is not executed. So if you want to declare b, you need to follow the syntax var a=1 , b ;

Now let's carefully change the priority questions.

1 || fn() && fn()

MDN is written so that the high-priority operators are executed first, and we all know that.|| It's short-circuited, and it won't be executed later. So what is the meaning of this first implementation?

1.3 Short circuit:

Short circuit of && operator (a && b): if a is false, b is not executed

| | b): If a is true, b does not need to be executed|| b)：如果a为真，b就不用执行了

Question: 1|| fn() & fn() Answer: 1 fn does not perform analysis: it is the short-circuit principle that uses the && operator.

Speaking of this, some students will think it's very simple, ah, that's it, ah, after seeing the short circuit, there's no need to forget it. Some students may also be a little confused, not to say good, high priority will be executed first? ""& qu Ha ha, stop arguing, let's look at the next question together.

Questions: var a = 42; var b = "foo"; var c = 0; c|| b ? a : b ; // 42

Those of you who said short circuit might say priority is still important. The classmate who said priority just now may have a confused face and quietly do not want to talk. So let's begin today's study.

2 Binding

Definition: Operators with higher priority execute first, not true execution, but stronger binding.

Let's use the above to ask two questions

1 ||fn() & fn() // && has high priority, so bind the following 1|| (fn() & fn())//so the values equivalent to 1 and (fn() & fn()) go to logical OR 1|| (fn() & fn())//we look up the table, logical or executed from left to right. 1 ||(fn() & fn())//left execution, 1 is true value, so short circuit, do not execute after the problem: var a = 42; var b = "foo"; var c = 0; c|| b ? a : b ; answer: 42 resolution: c|| b ? a : b ; //Table lookup conditional operator weight is 4, logical AND weight is 6, so logical AND has stronger binding (c|| b )? a : b ; //(c ||b ) Equivalent to condition (c) in conditional operator|| b )? a : b ; //(c ||b ) value is 0, so value is a

All right, let's do two more questions to reinforce

Question: var a = 5; var b = 5; var c = 5+a+++b; [ a , c ] Answer: [6, 15] Resolution: b = 5+a+++b; //Table look-up post-increasing weight 17 pre-increasing weight 16 b = 5 +(a++)+ b; /++ Priority is higher, so bind with binding a b = 5 +(a++)+ b;//According to the syntax post-increment, execute the statement first, then increment b = 5 +(a++)+ b; //When executing the statement, a is 5, so b is 15 b = 5 +(a++)+ b; /a is incremented to get 6 questions: var a = 5; var b = 5; var c = ++a-b; [ a , c ] Answer: [6, 1] Resolution: var c = ++a-b;//Look up the table and execute var c = ++a-b from left to right; //Increase first according to syntax, then execute statement a = 6 var c = ++a-b; //When executing statement a is 6, so b is 1

Seeing this, the students may suddenly realize that this is the case. Take it easy, let's move on to the next question. To solve this problem, we need to understand the concepts in the next section.

Questions: var a = 42; var b = "foo"; var c = 0; a & b|| c ? c || b ? a : c && b : a3 association

Definition: Associativity of operators to define the processing direction of expressions

Come on, talk to me.

Question: A & B && C execution order analysis: (1) Both operators are &&, the same weight. So at this point, we need to look at relevance. (2) Look up the table and the relevance of && is from left to right (3) So the expression should be (a && b)&& c Question: a? b ：c ？The order of execution of d : e is resolved: (1) Both operators are conditional operators with the same weight. So at this point, we need to look at relevance. (2) The relevance of the lookup conditional operator is from right to left (3) So the expression should be a? b ：（c ？d : e ）

Well, now we can easily solve the above problem.

A person learning will have confusion, lack of motivation. Here I recommend my front-end learning exchange group: 731771211, which is learning front-end, if you want to make cool web pages, want to learn programming. I sorted out a 2019 most comprehensive front-end learning materials, from the most basic HTML+CSS+JS [cool special effects, games, plug-in packages, design patterns] to mobile HTML5 project actual learning materials are sorted out, sent to each front-end small partner, there are those who want to learn web front-end, or switch, or college students, and those who want to improve their abilities at work, welcome to join the learning.

Questions: var a = 42; var b = "foo"; var c = 0; a & b|| c ? c || b ? a : c & b : a Answer: 42 Resolution: (a & b)|| c ? c || b ? a :(c && b) : a //First look up the table logic and weight is 6 highest ((a && b)|| c) ? c || b ? a :(c && b) : a //then logical OR ((a && b)|| c) ?（c || b ? a :(c && b): a //Two conditional operators with the same weight. Relevance from right to left

Ah, are you very happy? Finally, finally, let's talk about an explanation.

4 Clarification

As the name suggests, it is the place to explain the doubts, and the best way is to add ().

If you are proficient with precedence/association rules, your code can be cleaner, and many frameworks are written this way, which is beautiful.

But if you want to call it wrong, then add (), do not try to be brave, the name is helpful to the readability of the code.

At this point, I believe everyone has a deeper understanding of "how to use Javascript operators", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.