js中==和===的区别

写js的时候，也没仔细的研究过==和===两个操作符之间的具体区别，但是本着实事求是的态度，今天上网查了一下他们两个的区别，最后得出的结论是：

`===` 严格相等，会比较两个值的类型和值
`==`  抽象相等，比较时，会先进行类型转换，然后再比较值

然后我就更迷惑了，先类型转换，我擦，怎么转换，左边转换成右边类型还是右边转换成左边类型？

先看几个例子：

console.log([10] == 10);                //true
console.log('10' == 10);                //true
console.log([] == 0);                   //true
console.log(true == 1);                 //true
console.log([] == false);               //true
console.log(![] == false);              //true
console.log('' == 0);                   //true
console.log('' == false);               //true
console.log(null == false);             //false
console.log(!null == true);             //true
console.log(null == undefined);         //true

看完这几个例子，我更迷糊了，啥，不是说好先进行类型转换嘛，怎么转换？除了 null==false是false外，其他的都是true?但是 !null==true却是true?这是为啥？

没辙，越查越迷糊，乖乖去看ECMA的规范吧，看看标准是怎么规定的。

Strict Equality Comparison

The comparison x === y, where x and y are values, produces true or false. Such a comparison is performed as follows:

  1. If Type(x) is different from Type(y), return false.
  2. If Type(x) is Number, then
    • a. If x is NaN, return false.
    • b. If y is NaN, return false.
    • c. If x is the same Number value as y, return true.
    • d. If x is +0 and y is ‐0,return true.
    • e. If x is ‐0 and y is +0, return true.
    • f. Return false.
  3. Return SameValueNonNumber(x, y).
    NOTE This algorithm differs from the SameValue Algorithm in its treatment of signed zeroes and NaNs.

===

  • 如果Type(x)和Type(y)不同，返回false
  • 如果Type(x)和Type(y)相同
    • 如果Type(x)是Undefined，返回true
    • 如果Type(x)是Null，返回true
    • 如果Type(x)是String，当且仅当x,y字符序列完全相同（长度相同，每个位置上的字符也相同）时返回true，否则返回false
    • 如果Type(x)是Boolean，如果x,y都是true或x,y都是false返回true，否则返回false
    • 如果Type(x)是Symbol，如果x,y是相同的Symbol值，返回true,否则返回false
    • 如果Type(x)是Number类型
      • 如果x是NaN，返回false
      • 如果y是NaN，返回false
      • 如果x的数字值和y相等，返回true
      • 如果x是+0，y是-0，返回true
      • 如果x是-0，y是+0，返回true
      • 其他返回false

Abstract Equality Comparison

The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows:

  1. If Type(x) is the same as Type(y), then
    a. Return the result of performing Strict Equality Comparison x === y.
  2. If x is null and y is undefined, return true.
  3. If x is undefined and y is null, return true.
  4. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).
  5. If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.
  6. If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
  7. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
  8. If Type(x) is either String, Number, or Symbol and Type(y) is Object, return the result of the comparison x == ToPrimitive(y).
  9. If Type(x) is Object and Type(y) is either String, Number, or Symbol, return the result of the comparison ToPrimitive(x)== y.
  10. Return false.

==

  • 如果Type(x)和Type(y)相同，返回x===y的结果
  • 如果Type(x)和Type(y)不同
    • 如果x是null，y是undefined，返回true
    • 如果x是undefined，y是null，返回true
    • 如果Type(x)是Number，Type(y)是String，返回 x==ToNumber(y) 的结果
    • 如果Type(x)是String，Type(y)是Number，返回 ToNumber(x)==y 的结果
    • 如果Type(x)是Boolean，返回 ToNumber(x)==y 的结果
    • 如果Type(y)是Boolean，返回 x==ToNumber(y) 的结果
    • 如果Type(x)是String或Number或Symbol中的一种并且Type(y)是Object，返回 x==ToPrimitive(y) 的结果
    • 如果Type(x)是Object并且Type(y)是String或Number或Symbol中的一种，返回 ToPrimitive(x)==y 的结果
    • 其他返回false

上面两个片段是ecma262规范中对===和==计算过程的定义，我摘录过来并做了翻译。
可能一时半会有点不好理解，慢慢解释。

其中涉及到几个es定义的抽象操作：

  • Type(x) : 获取x的类型
  • ToNumber(x) : 将x转换为Number类型
  • ToBoolean(x) : 将x转换为Boolean类型
  • ToString(x) : 将x转换为String类型
  • SameValueNonNumber(x,y) : 计算非数字类型x,y是否相同
  • ToPrimitive(x) : 将x转换为原始值

这里的每个操作都有其严格并复杂的定义，可以直接查阅ECMA规范文档对其的详细说明。
附上在线文档地址：ECMA262-7th

这里我们看下SameValueNonNumber()和ToPrimitive()两个操作。

SameValueNonNumber (x, y)

The internal comparison abstract operation SameValueNonNumber(x, y), where neither x nor y are Number values, produces
true or false. Such a comparison is performed as follows:

  1. Assert: Type(x) is not Number.
  2. Assert: Type(x) is the same as Type(y).
  3. If Type(x) is Undefined, return true.
  4. If Type(x) is Null, return true.
  5. If Type(x) is String, then
    • a. If x and y are exactly the same sequence of code units (same length and same code units at corresponding indices), return true; otherwise, return false.
  6. If Type(x) is Boolean, then
    • a. If x and y are both true or both false, return true; otherwise, return false.
  7. If Type(x) is Symbol, then
    • a. If x and y are both the same Symbol value, return true; otherwise, return false.
  8. Return true if x and y are the same Object value. Otherwise, return false.

翻译一下：

  • 断言：Type(x)不是Number类型
  • 断言：Type(x)和Type(y)不同
  • 如果Type(x)是Undefined，返回true
  • 如果Type(x)是Null，返回true
  • 如果Type(x)是String，当且仅当x,y字符序列完全相同（长度相同，每个位置上的字符也相同）时返回true，否则返回false
  • 如果Type(x)是Boolean，如果x,y都是true或x,y都是false返回true，否则返回false
  • 如果Type(x)是Symbol，如果x,y是相同的Symbol值，返回true,否则返回false
  • 如果x和y是同一个对象值，返回ture，否则返回false

这个SameValueNonNumber操作说的就是，如果x,y两个值类型相同，但又不同时是Number类型时的比较是否相等的操作。

ToPrimitive ( input [ , PreferredType ] )

The abstract operation ToPrimitive takes an input argument and an optional argument PreferredType. The abstract operation ToPrimitive converts its input argument to a non‐Object type. If an object is capable of converting to more than one primitive type, it may use the optional hint PreferredType to favour that type.
Conversion occurs according to Table 9:
Table 9: ToPrimitive Conversions

Input Type Result
Undefined Return input.
Null Return input.
Boolean Return input.
Number Return input.
String Return input.
Symbol Return input.
Object Perform the steps following this table.

When Type(input) is Object, the following steps are taken:

  1. If PreferredType was not passed, let hint be "default".
  2. Else if PreferredType is hint String, let hint be "string".
  3. Else PreferredType is hint Number, let hint be "number".
  4. Let exoticToPrim be ? GetMethod(input, @@toPrimitive).
  5. If exoticToPrim is not undefined, then
    • a. Let result be ? Call(exoticToPrim, input, « hint »).
    • b. If Type(result) is not Object, return result.
    • c. Throw a TypeError exception.
  6. If hint is "default", let hint be "number".
  7. Return ? OrdinaryToPrimitive(input, hint).

When the abstract operation OrdinaryToPrimitive is called with arguments O and hint, the following steps are taken:

  1. Assert: Type(O) is Object.
  2. Assert: Type(hint) is String and its value is either "string" or "number".
  3. If hint is "string", then
    • a. Let methodNames be « "toString", "valueOf" ».
  4. Else,
    • a. Let methodNames be « "valueOf", "toString" ».
  5. For each name in methodNames in List order, do
    • a. Let method be ? Get(O, name).
    • b. If IsCallable(method) is true, then
      • i. Let result be ? Call(method, O).
      • ii. If Type(result) is not Object, return result.
  6. Throw a TypeError exception.

NOTE When ToPrimitive is called with no hint, then it generally behaves as if the hint were Number. However, objects may over‐ride this behaviour by de ining a @@toPrimitive method. Of the objects de ined in this speci ication only Date objects (see 20.3.4.45) and Symbol objects (see 19.4.3.4) over‐ride the default ToPrimitive behaviour. Date objects treat no hint as if the hint were String.

ToPrimitive() 方法

转换成原始类型方法。
js中的原始类型：

  • Null: null值.
  • Undefined: undefined 值.
  • Number: 所有的数字类型，例如0,1,3.14等 以及NaN, 和 Infinity.
  • Boolean: 两个值true和false.
  • String: 所有的字符串，例如'abc'和''.
    其他的都是'非原始'的，像Array,Function,Object等。

注意：typeof null 得到的结果是object。这里是由于js在最初的设计的问题。但其实null应该是属于原始类型的。

上面规范对 ToPrimitive 操作的说明大致可翻译如下：

ToPrimitive ( input [ , PreferredType ] )方法传递两个参数input和PreferredType，其中PreferredType是可选的。input输入,PreferredType可选的期望类型。
ToPrimitive 运算符把其值参数转换为非对象类型。如果对象有能力被转换为不止一种原语类 型,可以使用可选的 期望类型 来暗示那个类型。根据下表完成转换:

输入类型 结果
Undefined 不转换
Null 不转换
Boolean 不转换
Number 不转换
String 不转换
Object 返回该对象的默认值。（调用该对象的内部方法[[DefaultValue]]一样）

当input的类型是Object时，按照下面步骤进行操作：

  • 如果PreferredType没有传，令hint为"default"
  • 如果PreferredType参数是String类型，那么令hint为"string"
  • 如果PreferredType参数是Number类型，那么令hint为"number"
  • 令exoticToPrim为GetMethod(input, @@toPrimitive).
  • 如果exoticToPrim不是undefined，那么
    • 令result为 Call(exoticToPrim, input, « hint »).
    • 如果result类型不是Object，直接返回result
    • 扔出TypeError异常
  • 如果hint为"default",令hint为"number"
  • 返回OrdinaryToPrimitive(input, hint)的值

当抽象操作OrdinaryToPrimitive被执行，传递参数O和hint，按照下面步骤执行：

  • 断言：O的类型是Object
  • 断言：hint的类型是String，它的值只能是'string'或'number'
  • 如果hint是'string'
    • 令methodNames是« “toString”, “valueOf” »
  • 否则
    • 令methodNames是« “valueOf”, “toString” ».
  • 在有顺序的methodNames列表中，对于每个项目：
    • 令method为Get(O, name).
    • 如果IsCallable(method)返回true,然后
      • 令result为Call(method, O).
      • 如果result的类型不是Object，返回result
  • 返回TypeError异常

注意：当调用ToPrimitive而没有传hint参数时，默认情况下hint将被赋值Number。但是可以重写对象的@@toPrimitive方法来覆盖这个行为。在本规范中，只有Date和Symbol两个对象重写了默认的ToPrimitive操作。对于Date对象，如果没有传hint，hint将被默认赋值为String

看完之后是不是有一万只草泥马在心中跑过，我也是。

对于一个Object，ToPrimitive()方法是如何转换成原始类型的呢，最后转换成的原始类型的值又是多少呢？
我们光从上面的表格中可能看不出太多的东西来。下面我们来看看js的源码实现。

// ECMA-262, section 9.1, page 30. Use null/undefined for no hint,
// (1) for number hint, and (2) for string hint.
function ToPrimitive(x, hint) {
  // Fast case check.
  // 如果为字符串，则直接返回
  if (IS_STRING(x)) return x;
  // Normal behavior.
  if (!IS_SPEC_OBJECT(x)) return x;
  if (IS_SYMBOL_WRAPPER(x)) throw MakeTypeError('symbol_to_primitive', []);
  if (hint == NO_HINT) hint = (IS_DATE(x)) ? STRING_HINT : NUMBER_HINT;
  return (hint == NUMBER_HINT) ? %DefaultNumber(x) : %DefaultString(x);
}

默认情况下，如果不传hint参数，x如果是Date类型，则hint为String,否则hint为Number类型。
然后根据hint将处理结果返回。
例如对于[10]数组这个例子，默认hint应该为Number类型。
处理函数为 DefaultNumber(x) 。
那么，DefaultNumber()又是如何处理的呢？
继续找代码看呗

DefaultNumber()方法：

// ECMA-262, section 8.6.2.6, page 28.
function DefaultNumber(x) {
  if (!IS_SYMBOL_WRAPPER(x)) {
    var valueOf = x.valueOf;
    if (IS_SPEC_FUNCTION(valueOf)) {
      var v = %_CallFunction(x, valueOf);
      if (%IsPrimitive(v)) return v;
    }

    var toString = x.toString;
    if (IS_SPEC_FUNCTION(toString)) {
      var s = %_CallFunction(x, toString);
      if (%IsPrimitive(s)) return s;
    }
  }
  throw %MakeTypeError('cannot_convert_to_primitive', []);
}
  • 首先通过valueOf 转换，即 obj.valueOf()方法的返回值
  • 如果 obj.valueOf()方法的返回值是原始类型，那么直接返回
  • 如果不是，再通过 obj.toString()方法转换
  • 如果obj.toString()返回的是原始类型，直接返回该值
  • 如果还不是原始类型，抛出不能转换异常。

DefaultString()方法：

// ECMA-262, section 8.6.2.6, page 28.
function DefaultString(x) {
  if (!IS_SYMBOL_WRAPPER(x)) {
    // 转换为字符串原始类型时首先通过toString
    var toString = x.toString;
    if (IS_SPEC_FUNCTION(toString)) {
      var s = %_CallFunction(x, toString);
      if (%IsPrimitive(s)) return s;
    }

    // 否则通过valueOf
    var valueOf = x.valueOf;
    if (IS_SPEC_FUNCTION(valueOf)) {
      var v = %_CallFunction(x, valueOf);
      if (%IsPrimitive(v)) return v;
    }
  }
  // 否则抛出异常
  throw %MakeTypeError('cannot_convert_to_primitive', []);
}
  • 首先使用toString()转换
  • 如果obj.toString()返回的是原始类型的值，直接返回该值
  • 如果不是，再使用obj.valueOf()转换
  • 如果obj.valueOf()返回的是原始类型的值，返回该值
  • 如果还不是，抛出不能转换异常

好乱的有木有，简单总结下：

  • ToPrimitive(input,hint)转换为原始类型的方法，根据hint目标类型进行转换。
  • hint只有两个值：String和Number
  • 如果没有传hint，Date类型的input的hint默认为String,其他类型的input的hint默认为Number
  • Number 类型先判断 valueOf()方法的返回值，如果不是，再判断 toString()方法的返回值
  • String 类型先判断 toString()方法的返回值，如果不是，再判断 valueOf()方法的返回值

来两个简单的例子看一下ToPrimitive()的结果可能会更有效。

1.求 ToPrimitive([10])
对于数组，默认的hint应该为Number ,所以先判断 valueOf()

> [10].valueOf()
[10]

数组的valueOf()方法返回的是数组本身，不是一个原始类型，我们继续判断 toString()

> [10].toString();
'10'

toString()返回的是一个字符串 '10' 是一个原始类型，因此，ToPrimitive([10]) = '10'

2.ToPrimitive(function sayHi(){})

var sayHi = function (name) {
    console.log('hi ' + name);
}
console.log(sayHi.valueOf());
console.log(typeof sayHi.valueOf());
console.log(sayHi.toString());
console.log(typeof sayHi.toString());

结果：

[Function]
function
function (name) {
    console.log('hi ' + name);
}
string

先判断 valueOf() ，返回的是一个function类型，只能继续判断 toString()返回的是string类型的，是原始类型，因此，
ToPrimitive(sayHi)是源码字符串。

有了上面费了这么大劲准备的基础知识，我们再看看==就简单多了。哈哈。
有点远了，我们回过头来看 == 的那几个例子。
首先 [10]==10 这个
类型不同，Type([10])是Object，而Type(10)是Number,我们应该判断ToPrimitive([10])==10的结果
由上面的分析，ToPrimitive([10])的结果为 字符串'10'，因此结果变为要判断 '10'==10
Type('10')为String,(10)为Number，因此结果变为 ToNumber('10')==10
ToNumber('10')的值是 数字 10 ，因此，最后要判断的是 10==10
很明显，类型相同，值也相同，最终返回的就是 true

再来看 []==0 这个
同样地道理，ToPrimitive([])==''
而 ToNumber('')==0
因此 []==0 的结果是 true

[]==false也很简单了
false是Boolean类型的，我们要比较 []==ToNumber(false)即 []==0，就是上面这个啊，结果是 true

既然[]==false返回的是true，那么，![]==false应该返回的false吧，我靠，怎么还是true?
首先，左边 ![] 进行取反，要转换成Boolean类型，然后取反。Boolean([])的结果是true,取反是false
也就是，最终比较的是 false==false 结果当然是 true 了。

从上面我们可以看出，[]==![]是成立的，神奇吧，对，js就是这么神奇。

null==false的结果是false，==运算规则的最后一条，前面所有的都不满足，最后返回false，没什么好纠结的。
null==false的结果是false，但这并不代表 null==true 。因为 null==true 最后走的还是最后一条，返回false。

好了，写到这里应该差不多了，现在已经是凌晨3点了，脑子都转不动了，额，思路也比较乱，文章写的可能没那么有条理，如有发现错误之处，敬请指教吧。

其实还有很多隐藏的内容没说明白，比如 js 内部 ToNumber(),ToBoolean()是如何转换的等，ECMA-262规范说明中已经有很详细的说明，可以具体参考一下，这是最最最官方的说明了，没有比这个更准确的了。

还有就是，== 涉及到隐式类型转换，<（小于号） 也涉及到隐式类型转换，改天重新整理一下<以及js的隐式强制类型转换。

主要参考内容：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343