Home > Web Front-end > JS Tutorial > Detailed explanation of the contents of ==, === and Object.js() in js (comprehensive)

Detailed explanation of the contents of ==, === and Object.js() in js (comprehensive)

不言
Release: 2018-09-17 15:02:21
Original
1420 people have browsed it

This article brings you a detailed explanation of ==, === and Object.js() in js (comprehensive). It has certain reference value. Friends in need can refer to it. I hope It will help you.

This article mainly explains the three equality operations in JavaScript: ==, === and Object.js(). Deepen everyone's impression through comparison and examples, and provide detailed explanations of individual examples.

Preparatory knowledge

Detailed explanation of the knowledge of ToPrimitive abstract operation in ECMAScript7 specification (example)

=== operator

For x === y, the comparison steps of this operator are as follows:

1. If the type of x is different from the type of y, return false;

2. If the type of x is a number , then:

a. If x is NaN, return false;

b. If y is NaN, return false;

c. If x and y are the same Numeric value, returns true;

d. If x is 0 and y is -0, returns true;

e. If x is -0 and y is 0, returns true;

f. Return false;

3. Return the result of SameValueNonNumber(x, y).

SameValueNonNumber(x, y) abstract operation compares two non-numbers and whether x and y of the same type are equal. The comparison steps are as follows:

1. If the type of x is null or undefined, Return true;

2. If x is a string type,

If x and y are exactly the same character encoding sequence, return true, otherwise return false;

3 , If x is a Boolean type,

4. If x and y are both true or false, return true, otherwise return false;

5. If x is a symbol type,

If x and y are the same symbol value, return true, otherwise return false;

6. If x and y are the same object value, return true, otherwise return false.

The points to note are NaN, 0, -0:

NaN === NaN // false
+0 === -0 // true
-0 === +0 // true
Copy after login

These three examples correspond to 2.1, 2.4 and 2.5 in the x === y comparison step respectively. The output results of these three examples are completely in accordance with the definitions of the specifications. There is no reason, this is how the specifications are defined. As for why the specification is defined in this way, you may need to ask the makers of the specification. This is beyond the scope of this article.

Object.is()

For Object.is(x, y), the abstract operation SameValue(x, y) will be used for comparison. The steps of this abstract operation are as follows:

1. If the type of x is different from the type of y, return false;

2. If the type of x is a number, then:

a. If both x and y are NaN, returns true;

b. If x is 0 and y is -0, returns false;

c. If x is -0 and y is 0, returns false;

d. If x and y are the same numeric value, return true;

e, return false;

3. Return the result of SameValueNonNumber(x, y).

It can be seen that the difference between === and Object.is() lies in the processing of NaN and signed 0:

NaN === NaN // false
+0 === -0 // true
-0 === +0 // true
Object.is(NaN, NaN) // true
Object.is(+0, -0) // false
Object.is(-0, +0) // false
Copy after login

==Operator

For x == y, the comparison steps of this operator are as follows:

1. If x and y are of the same type, return the result of x === y;

2. If x is null , y is undefined, return true;

3. If x is undefined and y is null, return true;

4. If the type of x is a number and the type of y is a string, Return the result of x == ToNumber(y);

5. If the type of x is a string and the type of y is a number, return the result of ToNumber(x) == y;

6. If the type of x is a Boolean type, return the result of ToNumber(x) == y;

7. If the type of y is a Boolean type, return the result of x == ToNumber(y);

8. If the type of x is one of string, number or Symbol, and the type of y is an object, return the result of x == ToPrimitive(y);

9. If x The type is an object, and the type of y is one of string, number, or Symbol. The result of ToPrimitive(x) == y is returned;

10. Return false.

The method ToNumber was used above, and the steps for ToNumber(x) are as follows:

1. If the type of x is Undefined, return NaN;

2. If the type of x If it is Null, return 0;

3. If the type of x is a Boolean type, return 1 if x is true, and return 0 if false;

4. If the type of x is a number, return x;

5. If the type of x is a string, the reference string is converted into a number. This article will not introduce this content in detail;

6. If the type of x is a Symbol, NaN is returned;

7. If the type of x is an object,

a. Let the value of primValue be ToPrimitive(x, hint Number);

b. Return the result of ToNumber(primValue) ;

[] == ![]

The comparison steps of the == operator are discussed above. Let’s talk about an example to deepen our impression:

[] == ![]
Copy after login

First, the left [] is an empty array, the type is object, the right side is ![], [] is a true value, so the result of ![] is false:

[] == ![] // => [] == false
Copy after login

Then it will go to the x == y comparison step In step 7, return the result of x == ToNumber(y), that is:

[] == false // => [] == ToNumber(false)
Copy after login

From step 3 of ToNumber(x), we know that ToNumber(false) returns 0:

[] == ToNumber(false) // => [] == +0
Copy after login

Then go to step 9 of the x == y comparison step and return the comparison result of ToPrimitive(x) == y:

[] == +0 // => ToPrimitive([]) == +0
Copy after login

The result of ToPrimitive([]) is the empty string "", please give the reason Check out the article ToPrimitive abstract operation in the ECMAScript7 specification. Therefore, the above is equivalent to:

"" == +0
Copy after login

Then go to step 5 of the x == y comparison step and return the result of ToNumber(x) == y:

"" == +0 // => ToNumber("") == +0
Copy after login

由ToNumber操作的第5步可知,ToNumber("")的结果是+0,所以也就是:

+0 == +0 // true
Copy after login

{} == !{}

首先,左边是{},类型是对象,右边是!{},{}是真值,所以!{}是false:

{} == !{} // => {} == false
Copy after login

然后同样会走到x == y比较步骤的第7步,返回x == ToNumber(y)的结果,也就是:

{} == false // => {} == ToNumber(false)
Copy after login

由ToNumber(x)的第3步可知,ToNumber(false)返回+0:

{} == ToNumber(false) // => {} == +0
Copy after login

然后走到x == y比较步骤的第9步,返回ToPrimitive(x) == y的比较结果:

{} == +0 // => ToPrimitive({}) == +0
Copy after login

ToPrimitive({})的结果是字符串"[object Object]",原因请查看文章ECMAScript7规范中的ToPrimitive抽象操作。所以,上面等价于:

"[object Object]" == +0
Copy after login

然后走到x == y比较步骤的第5步,返回ToNumber(x) == y的结果:

"[object Object]" == +0 // => ToNumber("[object Object]") == +0
Copy after login

由ToNumber操作的第5步可知,ToNumber("[object Object]")的结果是NaN,所以也就是:

NaN == +0 // false
Copy after login

所以,[] == ![]的结果是true,{} == !{}的结果是false。可能有人第一次看到[] == ![]的时候,觉得这个的比较结果怎么可能是true。我觉得有时候不要感性的去认识问题,按照规定的运算步骤走一遍,结果是什么就是什么。

总结

本文讲解了JavaScript中的三种相等运算:==,===和Object.js(),希望对大家有所帮助。

The above is the detailed content of Detailed explanation of the contents of ==, === and Object.js() in js (comprehensive). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template