图解 == 操作符规则和不同类型间转换规则

图解 == 操作符规则和不同类型间转换规则

很多人包括我在内很抵触这种问题?,因为很长一段时间我一直弄不明白 == 和 === 到底是怎么个规则。如果你也没闹明白 == 和 ===,读了这篇文章应该至少不会见到这俩操作符就觉得恶心了吧?。

另外需要注意的是,== 的英文名叫 Abstract Equality Comparison;=== 则是 Strict Equality Comparison。

废话不多说,我们开始搞起

== 操作符

== 操作符基本规则

首先需要注意的是

  • 如果要比较的两个项是同种类型的,那么 == 就会返回 === 操作符的执行结果。举个例子? 2 == 3 最后会返回 2 === 3 的执行结果
  • 如果要比较的两个项是不同类型的,== 就会对其中一个或两者都进行类型转换然后再比较。比如 2 == '3' 就会变成 2 == 3 最后会比较 2 === 3

这就是最基本的规则

== 操作符具体的转化规则

然后我们再来看看具体的转换规则⬇️:

整体流程概览

  1. 如果类型相同,调用 === 操作符
  2. 如果类型不同,尝试类型转换
  • 1. 查看是否是 undefinednull 比较
    • ✅ 返回 `true`
    • ⬇️ 如果不是继续下一条规则
  • 2. 是否在比较 stringnumber
    • ✅ 如果是,那么将 `string` 转为 `number` 并回到最初重新比较 ♻️
    • ⬇️ 如果不是继续下一条规则
  • 3. 查看我们比较的项中是否有 boolean
    • ✅ 如果有,那么将 `boolean` 转为 `number` 并回到最初重新比较 ♻️
    • ⬇️ 如果不是继续下一条规则
  • 4. 查看是否有一项是 object
    • ✅ 如果有,那么将 `object` 转为其原始值 `primitive` 并回到最初重新比较 ♻️
    • ❌ 如果还不是,只能返回 `false` 了?

举几个?:

20190310173625.png

这么看来转换规则是不是很清晰明了?

附上一张转换规则图,忘记了就看看,当然正常情况下应该用 === 代替 == 避免不必要的麻烦:

20190311001056.png

ecma 的规范:http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-equality-comparison

类型转换

上述在比较的过程中,涉及到类型的转换,如字符串转整数、布尔值转整数、以及获取对象原始值等等。了解一下这些不同类型之间是如何转换的:

获取对象原始值

接着我们再来研究一下对象怎么转换为原始值的:

我们需要知道转换类型的这个方法在 JS 源代码中是 ToPrimitive 这个方法,该方法有一个可选参数 PreferredType,这个参数的作用是指定期望类型;如果第一个参数对应的对象可以被转换为不止一种类型,那么后者可以作为一种暗示,表示该对象应该转换为那种类型

  • 1. 默认情况下(期望类型默认为 number
  • 1. 调用 valueOf 方法:
    • ✅ 如果返回的是原始值,那么就用这个
    • ⬇️ 如果返回的不是原始值,那么跳到下一步
  • 2. 调用 toString 方法:
    • ✅ 如果返回的是原始值,那么就用这个
    • ❌ 否则报错?
  • 2. 如果期望类型为 string
  • 1. 调用 toString 方法:
    • ✅ 如果返回的是原始值,那么就用这个
    • ⬇️ 如果返回的不是原始值,那么跳到下一步
  • 2. 调用 valueOf 方法:
    • ✅ 如果返回的是原始值,那么就用这个
    • ❌ 否则报错?
  • 3. 如果对象是 Date 类型(期望类型为 string):
  • 1. 调用 toString 方法:
    • ✅ 如果返回的是原始值,那么就用这个
    • ⬇️ 如果返回的不是原始值,那么跳到下一步
  • 2. 调用 valueOf 方法:
    • ✅ 如果返回的是原始值,那么就用这个
    • ❌ 否则报错?

简单的说就是默认调用 valueOf 方法,然后是 toString 方法;如果对象是 Date 类型或对象的期望类型为 string,那么先调用 toString 方法?

举几个???吧:

20190310181039.png

普通的对象,首先调用 valueOf 方法,返回的结果并非原始值,那么会调用 toString 方法

20190310181441.png

假设我们重写 valueOf 方法,valueOf 和 toString 同时返回 string 原始值。使用 == 操作符可以看出,对象还是优先使用了 valueOf 方法返回的值

20190310181837.png

上面的数组同理,首先默认调用 valueOf 方法,如不是原始值,则调用 toString 方法

20190310182219.png

这个包括众多类型的项的数组也是一样?

20190310182751.png

再看看 Date 类型,他的期望类型是 string 因此首先调用的是 toString 方法,该方法返回一个原始值,那么就是用这个原始值

转换为 number

下面我们来看看转换成 number 类型的规则:

  1. undefined ? NaN 如果是 undefined 则直接转换成 NaN
  2. null ? 0 如果是 null 则转换成 0
  3. boolean ? 0/1 如果是 boolean 则转换成 0 或 1
  4. string ? 0/NaN/(parse to number) 如果是 string 则转换成对应的 number,空字符串转换为 0,无法转换的则为 NaN
  5. object ? 首先获取原始值然后再转为 number

看几个?:

20190310233718.png

转换为 string

转为 string 的规则为:

  1. undefined ? 'undefined'
  2. null ? 'null'
  3. number ? 'number
  4. boolean ? 'true'/'false'
  5. object ? 首先获取原始值,然后转为 string

20190310234912.png

转为 boolean

常见的问题:哪些是 falsy 哪些是 truthy:

❌下面这些在 JS 中都为 falsy 除此之外的都是 truthy

  1. undefined ? falsy
  2. null ? falsy
  3. 0 ? falsy
  4. "" ? falsy
  5. NaN ? falsy

因此转换规则如下:

  1. undefined ? false
  2. null ? false
  3. number ? 当为 0 时 false 否则为 true
  4. string ? 当为空字符串时为 false 否则为 true
  5. object ? true
  6. array ? true
  7. Date ? true

??是几个例子:

20190311000041.png

附上一张不同类型间转换规则:

20190311001627.png

就写到这里,基本上 == 和类型转换就是这个样子❕

EOF

参考:

  • http://www.cnblogs.com/178mz/p/5083228.html?utm_medium=referral
  • http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-equality-comparison
  • https://www.codementor.io/javascript/tutorial/double-equals-and-coercion-in-javascript

原文发布于微信公众号 - JS菌(awesomefe)

原文发表时间:2019-03-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券