本篇文章给大家带来的内容是关于详解js中==、===以及Object.js()的内容(全面),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
本文主要讲解JavaScript中的三种相等运算:==,===和Object.js()。通过对比和例子,加深大家的印象,并就个别例子进行详细说明。
预备知识
详解ECMAScript7规范中ToPrimitive抽象操作的知识(示例)
===运算符
对于x === y,该运算符的比较步骤如下:
1、如果x的类型和y的类型不一样,返回false;
2、如果x的类型是数字,那么:
a、如果x是NaN,返回false;
b、如果y是NaN,返回false;
c、如果x和y是同一个数字值,返回true;
d、如果x是+0,y是-0,返回true;
e、如果x是-0,y是+0,返回true;
f、返回false;
3、返回SameValueNonNumber(x, y)的结果。
SameValueNonNumber(x, y)抽象操作比较两个非数字并且同类型的x和y是否相等,比较步骤如下:
1、如果x的类型是null或者undefined,返回true;
2、如果x是字符串类型,
如果x和y是完全相同的字符编码序列,返回true,否则返回false;
3、如果x是布尔类型,
4、如果x和y同为true或者false,返回true,否则返回false;
5、如果x是symbol类型,
如果x和y是相同的符号值,返回true,否则返回false;
6、如果x和y是同一个对象值,返回true,否则返回false。
需要注意的点是NaN,+0,-0:
NaN === NaN // false +0 === -0 // true -0 === +0 // true
这三个例子分别对应x === y比较步骤中的2.1,2.4和2.5。这三个例子的输出结果完全就是按照规范的定义得出的结果,没有为什么,规范就是这么定义的。至于说为什么规范要这样定义,可能就需要去问规范的制定者了,这个就不在本文的讨论范围之内了。
Object.is()
对于Object.is(x, y),会使用抽象操作SameValue(x, y)进行比较,该抽象操作的步骤如下:
1、如果x的类型和y的类型不一样,返回false;
2、如果x的类型是数字,那么:
a、如果x和y都是NaN,返回true;
b、如果x是+0,y是-0,返回false;
c、如果x是-0,y是+0,返回false;
d、如果x和y是同一个数字值,返回true;
e、返回false;
3、返回SameValueNonNumber(x, y)的结果。
由此可见,===和Object.is()的区别在于对NaN和带符号的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
==运算符
对于x == y,该运算符的比较步骤如下:
1、如果x和y的类型相同,返回x === y的结果;
2、如果x是null,y是undefined,返回true;
3、如果x是undefined,y是null,返回true;
4、如果x的类型是数字,y的类型是字符串,返回x == ToNumber(y)的结果;
5、如果x的类型是字符串,y的类型是数字,返回ToNumber(x) == y的结果;
6、如果x的类型是布尔类型,返回ToNumber(x) == y的结果;
7、如果y的类型是布尔类型,返回x == ToNumber(y)的结果;
8、如果x的类型是字符串、数字或者Symbol中的一种,y的类型是对象,返回x == ToPrimitive(y)的结果;
9、如果x的类型是对象,y的类型是字符串、数字或者Symbol中的一种,返回ToPrimitive(x) == y的结果;
10、返回false。
上面用到了方法ToNumber,ToNumber(x)的步骤如下:
1、如果x的类型是Undefined,返回NaN;
2、如果x的类型是Null,返回+0;
3、如果x的类型是布尔类型,x为true返回1,false返回+0;
4、如果x的类型是数字,返回x;
5、如果x的类型是字符串,参考字符串转化为数字,本文不详细介绍这块内容;
6、如果x的类型是Symbol,返回NaN;
7、如果x的类型是对象,
a、让primValue的值是ToPrimitive(x, hint Number);
b、返回ToNumber(primValue)的结果;
[] == ![]
上面讲了==运算符的比较步骤,下面我们讲一个例子加深下印象:
[] == ![]
首先左边的[]是一个空数组,类型是对象,右边是![],[]是一个真值,所以![]的结果是false:
[] == ![] // => [] == false
然后会走到x == y比较步骤的第7步,返回x == ToNumber(y)的结果,也就是:
[] == false // => [] == ToNumber(false)
由ToNumber(x)的第3步可知,ToNumber(false)返回+0:
[] == ToNumber(false) // => [] == +0
然后走到x == y比较步骤的第9步,返回ToPrimitive(x) == y的比较结果:
[] == +0 // => ToPrimitive([]) == +0
ToPrimitive([])的结果是空字符串"",原因请查看文章ECMAScript7规范中的ToPrimitive抽象操作。所以,上面等价于:
"" == +0
然后走到x == y比较步骤的第5步,返回ToNumber(x) == y的结果:
"" == +0 // => ToNumber("") == +0
由ToNumber操作的第5步可知,ToNumber("")的结果是+0,所以也就是:
+0 == +0 // true
{} == !{}
首先,左边是{},类型是对象,右边是!{},{}是真值,所以!{}是false:
{} == !{} // => {} == false
然后同样会走到x == y比较步骤的第7步,返回x == ToNumber(y)的结果,也就是:
{} == false // => {} == ToNumber(false)
由ToNumber(x)的第3步可知,ToNumber(false)返回+0:
{} == ToNumber(false) // => {} == +0
然后走到x == y比较步骤的第9步,返回ToPrimitive(x) == y的比较结果:
{} == +0 // => ToPrimitive({}) == +0
ToPrimitive({})的结果是字符串"[object Object]",原因请查看文章ECMAScript7规范中的ToPrimitive抽象操作。所以,上面等价于:
"[object Object]" == +0
然后走到x == y比较步骤的第5步,返回ToNumber(x) == y的结果:
"[object Object]" == +0 // => ToNumber("[object Object]") == +0
由ToNumber操作的第5步可知,ToNumber("[object Object]")的结果是NaN,所以也就是:
NaN == +0 // false
所以,[] == ![]的结果是true,{} == !{}的结果是false。可能有人第一次看到[] == ![]的时候,觉得这个的比较结果怎么可能是true。我觉得有时候不要感性的去认识问题,按照规定的运算步骤走一遍,结果是什么就是什么。
总结
本文讲解了JavaScript中的三种相等运算:==,===和Object.js(),希望对大家有所帮助。
以上就是详解js中==、===以及Object.js()的内容(全面)的详细内容,更多请关注Work网其它相关文章!