This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

First a few questions, if you can do it and understand the following content can not see, if you can not do it can find the answer in the article.

// What is the following output?
console.log(1+'3'++new Date());
console.log(typeof 2*3);
console.log(typeof (2*3));
console.log(typeof 2+3);
console.log(true + false);
console.log([1.2] + [3.4]);
console.log(6.6.6);
console.log(+!! []);console.log(' ' - - ' ');
console.log(!6+!6);
console.log([] + []);
console.log(0/0.1/0);
console.log(true + ('true' - 0));

var a=0, b=0;
console.log(a+++b, a, b);

var arr, arr2;
arr2 = arr = [1.2.3];
arr[arr.length] = arr = 4;
console.log(arr);
console.log(arr2);
Copy the code

Looking at these problems, I used to think that operators were really easy, but they’re not really easy to put together. It’s not usually recommended to write code like this, but it’s a good opportunity to learn more about operators.

Operator

In JavaScript, operators are used to concatenate simple expressions to form a complex expression. During the operation, the operand is converted to a specific type as required. Finally, the specified type is output. I have a habit of memorizing it in six categories: arithmetic operators, comparison operators, Booleans, assignment operators, bitwise operators, and others.

(1) Arithmetic operators (10)
  • The Addition operator: x + y
  • Traction operator (Subtraction) : X-y
  • Multiplication operator (x) : x * y
  • Division operator: x/y
  • Remainder operator: x % y
  • Increment (x++)
  • The Decrement operator: –x or x–
  • Find the Negate operator: -x
  • Convert to number: +x
  • Exponential operator: x**y, e.g. 2**4=16

Description:

  1. X ++ is going to do it and then x+ 1 is going to do it. Such asconsole.log(2 - a++)The equivalent ofconsole.log(2-a); a = a+1;Plus plus x adds one and then participates. Such asconsole.log(2 - ++a)The equivalent ofa=a+1; console.log(2-a)
  2. The sign of the mod depends on the first digit, e.g2 to 1-7%; 7% - 2 to 1, so in order to get the correct residual value of negative numbers, we need to use absolute functions, such as determining whether num is evenMath.abs(num) % 2
  3. +new Date(), +[] // 0, +{} // NaN, +true // 1
  4. The + sign determines whether to add or concatenate. If either side is a string, it becomes a concatenate; otherwise, it is converted to add numbers.For adding objects, valueOf() is called first and then toString() is called, but valueOf() usually returns the original object, so toString() is usually called.In particular, the Date object is reversed, toString() followed by valueOf(). Such as'3' + 5 + 6 // 356and3 + 5 + '6' // '86'.
  5. 0 divided by 0 is NaN; If you divide a non-zero number by zero, you get Infinity, minus Infinity.
0 / 0 // NaN
1 / 0 // Infinity
1 / -0 // -Infinity
-1 / 0 // -Infinity
-1 / -0 // Infinity
Copy the code
(2) Comparison operators (8)
  • = = : equal
  • === : Strictly equal
  • ! = : not equal
  • ! == : Strictly unequal
  • < : less than
  • <= : Less than or equal to
  • >.
  • >= : The value is greater than or equal to

Note: === is strictly equal, requiring that the type and value be equal (where NaN===NaN is false); The == is implicitly converted and then compared to see if the values are equal. Refer to the article for detailed conversion rules.

(3) Boolean operators (4)
  • ! : takes the inverse operator
  • && : and operator
  • | | : or operator
  • condition? true case : false case: Ternary conditional operator

Description:

  1. ! Boolean(); Boolean(); Boolean(); Boolean(); 0 for! Boolean(0) returns true.
  2. And and or operations are short-circuit operations, i.ea && bTrue if both are true, and b is ignored if a is false;a || bIf a is true, it is true, and if a is true, b is ignored.
  3. condition ? a : bThe equivalent ofif(condition) { a } else { b }.
(four) bit operators (seven)
  • Or operations (or) : symbols for |, said one of the two binary is 1, the result is 1, otherwise 0.
  • Operation with (and) : The symbol & indicates that both bits are 1, the result is 1, otherwise 0.
  • Operation not: the symbol ~ indicates that a binary bit is changed to the opposite value.
  • Xor operation (XOR) : Symbol for ˆ, which indicates that the result is 1 when one and only one of two binary bits is 1, and 0 otherwise.
  • Left shift operation: symbol <<
  • Right shift operation: symbol >>
  • Zero filled right Shift: symbol >>>
(5) Assignment operators (11)
  • X += y // is the same as x = x + y
  • X -= y // is the same as x = x – y
  • X *= y // is the same thing as x = x * y
  • X /= y // is the same thing as x = x/y
  • X %= y // is the same as x = x % y
  • X >>= y // is the same as x = x >> y
  • X <<= y is the same as x = x << y
  • X >>>= y // is the same as x = x >>> y
  • X &= y // is the same thing as x = x & y
  • | x = y / / is equivalent to x = x | y
  • X ^= y // is the same thing as x = x ^ y
(6) Other operators
  • Parentheses: Can be used in two ways. If an expression is placed in parentheses, it is used to evaluate. If it comes after a function, it calls the function.
  • Void: The void operator executes an expression and returns undefined. Common A label writejavascript:void(0)That’s how it works, it runs the expression after the colon but returns undefined and it doesn’t execute.
  • Comma operator: The comma operator is used to evaluate two expressions and return the value of the latter expression.
  • Typeof operator: returns the typeof the operand, wheretypeof nullThe ‘object’,typeof FunctionThe result is ‘function’.
  • The instanceof operator:a instanceof bChecks if a is an instance of B and returns a Boolean.

The precedence of the operator

The precedence of the operators is as follows (up greater than down, left greater than right)
++, — (right combination is greater than left combination), – (turn negative), + (revolution), ~ (reverse),! (the)
Delete, typeof, void
*, /, %, +, –
<=, >=, ==! === =! = =
| |, &&,? :, assign,,

Description:

  1. Priority means calculating the higher priority part first when it comes up at the same time, not doing this first. For example, the plus sign of revolutions takes precedence over the plus sign of addition,1+'3'++new Date()It’s not as if the plus sign is a revolution first, if it is1 + '3'It’s going to be 4 but it’s going to be 13, which is obviously used as a plus sign. I’m saying compute first+new Date()Get the timestamp1531139346042And then to perform1 + '3' + 1531139346042.
  2. Operands such as ++ and — must be numbers that can be placed to the left of assignment and not constants, such as4 + +Complains. Also note the following examples:
var a=0, b=0;
a+++b; / / 0
a; / / 1
b; / / 0
Copy the code

The right combination takes precedence over the left combination and the plus sign, so they look for the right combination first, and they find a++, so it’s (a++)+b.

  1. Typeof has higher precedence than addition, subtraction, multiplication, and division, so it is customary to bracket operands, as in
typeof 2*3; // NaN
typeof (2*3); // 'number'
typeof 2+3; // 'number3'
Copy the code
  1. Logic has higher priority than addition, subtraction, multiplication and division, but logic or and has lower priority than addition, subtraction, multiplication and division.! 2 * 0The equivalent of(! 2) * 0.
  2. Logic or | |, logic and the short-circuit && operation should pay attention to, and the returned is one of the expressions, rather than a Boolean value.1 && "hi" || 0As a result of the'hi'.
  3. Assignment has a very low priority.
a = b == c // a = (b==c)
Copy the code

In this example, guess the answer first and then check the correct answer. Will arr. Length report an error?

var arr, arr2;
arr2 = arr = [1.2.3];
arr[arr.length] = arr = 4;
console.log(arr);
console.log(arr2);
Copy the code

Arr [arr. Length] = arr = 4 arr[arr. Length] = arr = 4 arr[arr. Length] = arr[3] Then 4 is assigned to ARR and the value of arR 4 is assigned to the memory that the address points to (i.e., arr2[3] becomes 4). So the result is arR is 4, and ARR2 is [1, 2, 3, 4]. Let’s do a similar example.

var a = {n: 1};
var b = a;
a.x = a = {n:2};
console.log(a.x); // undefined
console.log(b.x); // {n: 2}
Copy the code

After reading the above content, go back to the original question, can you solve it and understand why?