Talking about javascript Operators Condition Comma Assignment of and void Operators

  • 2021-07-04 17:47:43
  • OfStack

Previous words

There are 46 operators in javascript, and there are many operators in addition to the arithmetic operators, relational operators, bitwise operators and logical operators that have been introduced before. This article covers the conditional, comma, assignment, (), and void operators

Conditional operator

The conditional operator is a 1-only 3-ary operator (3 operands) in javascript, sometimes referred to directly as the '3-ary operator'. Usually this operator is written as'? Of course, it is often not so abbreviated in code, because this operator has three operands, and the first operand is in '? Before ', the second operand is in'? Between 'and' ', with the third operand after' '


variable = boolean_expression ? true_value : false_value;

Essentially, this is to decide what value to assign to the variable variable based on the evaluation of boolean_expression. If the evaluation result is true, the variable variable is assigned the value true_value; If the evaluation result is false, the variable variable is assigned the value false_value

The operand of a conditional operator can be of any type. The first operand is treated as a Boolean value. If it is true, the second operand is evaluated and its evaluation result is returned. Otherwise, if the first operand is a false value, the third operand is evaluated and its evaluation result is returned. The second and third operands always calculate one of them, and it is impossible to execute both at the same time

In fact, using if statement will bring the same effect, '? The: 'Operator only provides a shorthand form. Here is a '? The typical application scenario of: ', judge whether a variable is defined (and has a meaningful truth value), use it if it is defined, and use a default value if it is not defined:


greeting = 'hello ' + (username ? username : 'there');

This is equivalent to the following code using the if statement, but obviously the above code is more concise:


greeting = 'hello ';
if(username)
  greeting += username;
else
  greeting += 'there';

3 yuan conditional expression has the same expression effect as if... else statement, but there is one major difference between them. if... else is a statement and has no return value; A 3-yuan conditional expression is an expression with a return value. Therefore, when you need to return a value, you can only use 3 yuan conditional expressions, but you can't use if... else


console.log(true ? 'T' : 'F');

In the above code, the parameter of console. log method must be 1 expression, so only 3 yuan conditional expression can be used

Comma operator

The comma operator is a 2-yuan operator, and its operands can be of any type. It first calculates the left operand, then calculates the right operand, and finally returns the value of the right operand. With the comma operator, you can perform multiple operations in one statement


i = 0,j = 1,k = 2;
// The result of the calculation is 2 Which is basically equivalent to the following code 
i =0; j = 1; k = 2;

Comma operators are often used to declare multiple variables


var iNum1 = 1, iNum = 2, iNum3 = 3;

The most common scenario for the comma operator is in an for loop, which typically has multiple loop variables:


//for The first in the loop 1 A comma is var Statement 1 Part 
// No. 1 2 Commas are comma operators 
// It sets two expressions (i++ And j--) Put on 1 In a statement 
for(var i=0, j=10;i<j;i++,j--){console.log(i+j);}

The comma operator can also be used for assignment, and when used for assignment, the comma operator always returns the last item in the expression


var num = (1,2,3,4,5);
console.log(num);//5

[Note] Removing brackets will report an error

Assignment operator

The simple assignment operator is represented by the equal sign '=', which assigns the value to the right of the equal sign to the variable or attribute to the left of the equal sign


i = o;
o.x = 1;

The '=' operator wants its left operand to be 1 left value: 1 variable or object property (or array element). Its right operand can be any value of any type. The value of the assignment expression is the value of the right operand

Although assignment expressions are usually very simple, you can sometimes see a number of complex expressions that contain assignment expressions. For example, you can put assignment and relational operators in one expression, like this:


(a=b) == 0

If you do this, you should know clearly the difference between the '=' and '==' operators. '=' has a very low priority. Usually, when the value of an assignment statement is used in a long expression, parentheses need to be added to ensure the correct operation order

The associativity of assignment operators is right-to-left, that is, if multiple assignment operators appear in an expression, the order of operation is right-to-left. Therefore, you can assign values to multiple variables in the following ways:


greeting = 'hello ' + (username ? username : 'there');
0

JavaScript also provides 11 compound assignment operators that perform the specified operation and then return the resulting value to the variable on the left

[Note] These operators are designed to simplify assignment operations, and using them does not result in any performance improvement


total += sales_tax;
// Equivalent to 
total = total + sales_tax;

 Operator     Example      Equivalent to 
+=     a+=b    a=a+b
-=     a-=b    a=a-b
*=     a*=b    a=a*b
/=     a/=b    a=a/b
%=     a%=b    a=a%b
<<=    a<<=b   a=a<<b
>>=    a>>=b   a=a>>b
>>>=    a>>>=b   a=a>>>b
&=     a&=b    a=a&b
|=     a|=b    a=a|b
^=     a^=b    a=a^b

In most cases, the expression is:


greeting = 'hello ' + (username ? username : 'there');
3

Here op stands for one operator, which is equivalent to the following expression


greeting = 'hello ' + (username ? username : 'there');
4

In line 1, the expression a is evaluated once, and in line 2, the expression a is evaluated twice, and they are not equivalent only if a contains expressions with side effects, such as function calls and assignment operations


greeting = 'hello ' + (username ? username : 'there');
5

Parenthesis operator

The parenthesis operator is used in two ways: if the expression is placed in parentheses, the function is to evaluate; If it follows the function, the function is called

Placing the expression in parentheses will return the value of the expression


greeting = 'hello ' + (username ? username : 'there');
6

If you put an object in parentheses, the value of the object is returned, that is, the object itself


var o = {p:1};
console.log((o));// Object {p: 1}

Placing a function in parentheses returns the function itself. If the parenthesis follows the function immediately, it means that the function is called, that is, the function is evaluated


function f(){return 1;}
console.log((f));// function f(){return 1;}
console.log(f()); // 1

Because parentheses are used to evaluate, if you put a statement in parentheses, you will report an error because the statement does not return a value


greeting = 'hello ' + (username ? username : 'there');
9

void Operator

void is a 1-ary operator that appears before an operand, which can be of any type, and is evaluated as usual, ignoring the result and returning undefined. Because void ignores the value of the operand, void is used to make the program more semantic when the operand has side effects


console.log(void 0); // undefined
console.log(void(0)); // undefined

"Action 1" replaces undefined

Because undefined is not a keyword, it will be overridden in IE8-browser, and it will also be overridden in the scope of higher version functions; So you can replace undefined with void 0


var undefined = 10;
console.log(undefined);//IE8- Under the browser is 10 Under the higher version browser is undefined

function t(){
  var undefined = 10;
  console.log(undefined);
}
console.log(t());// Under all browsers 10

"Role 2" client URL

This operator is most commonly used on the client side URL--javascript: URL, where expressions with side effects can be written, and void eliminates the need for the browser to display the expression's evaluation. For example, often in HTML code, < a > The void operator is used in the tag


<a href="javascript:void window.open();"> Open 1 New windows </a>

Action 3 Block Default Events

Default events are blocked by setting the return value false to the event


//1 General writing 
<a href="http://example.com" onclick="f();return false;"> Text </a>

Use the void operator to replace the above writing


<a href="javascript:void(f())"> Text </a>

Related articles: