资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/从0开始构建自己的前端知识体系-不要对"=="说不

从0开始构建自己的前端知识体系-不要对"=="说不

tianyu / 1507人阅读

摘要：为了避免某些场景下的意外，甚至推崇直接使用来代替。使用了运算符的一些规则，发生了类型转换。按照以下规则转换被传递参数直接返回直接返回直接返回直接返回直接返回返回一个对象的默认值。

前言

类型转换在各个语言中都存在，而在 JavaScript 中由于缺乏对其的了解而不慎在使用中经常造成bug被人诟病。为了避免某些场景下的意外，甚至推崇直接使用 Strict Equality( === )来代替 ==。这确实能避免很多bug，但更是一种对语言不理解的逃避(个人观点)。

引入

先抛出在 You Don"t Know JavaScript (中) 看到的一个例子

  [] == [] // false
  [] == ![] // true
  {} == !{} // false
  {} == {} // false

是不是很奇怪？本文将从书中看到的知识与规范相结合，来详细说明一下JavaScript在类型转换时候发生的故事。

类型转换

很多人喜欢说显示类型转换与隐式类型转换，但个人感觉只是说法上的不同，实质都在发生了类型转换而已，故不想去区分他们了（感觉一万个人有一万种说法）

仅在6大基本类型 null undefined number boolean string object 作讨论 symbol未考虑

举个栗子 

var a = String(1)
var b = Number("1")
var c = 1 + ""
var d = +"1"

a,b直接调用了原生函数，发生了类型转换。c,d使用了+运算符的一些规则，发生了类型转换。这些是很简单的也是我们常用的。

其实真正起作用的，是语言内部对规范中抽象操作的实现，接下来我们所说的 ToString, ToNumber, ToBoolean 等都是抽象操作，而不是JS里对应的内置函数

ToString - 规范9.8

按照以下规则转化被传递的参数

Argument Type Result
Undefined "undefined"
Null "null"
Boolean true -> "true"
false - > "false"
Number NaN -> "NaN"
+0 -0 -> "0"
-1 -> "-1"
infinity -> "Infinity"
较大的数科学计数法 (详见规范9.8.1)
String 不转换 直接返回
Object 1. 调用ToPrimitive抽象操作, hint 为 String 将返回值作为 value
2. 返回ToString(value)		 
String(undefined) // "undefined"
String(null) // "null"
String(true) // "true"
ToPrimitive 抽象操作下面会提及

ToNumber - 规范9.3

按照以下规则转换被传递参数

Argument Type Result
Undefined NaN
Null +0
Boolean true -> 1
false -> +0
Number 直接返回
String 如果不是一个字符串型数字，则返回NaN(具体规则见规范9.3.1)
Object 1. 调用ToPrimitive抽象操作, hint 为 Number 将返回值作为 value
2. 返回ToNumber(value)

ToBoolean - 规范9.2

按照以下规则转换被传递参数

Argument Type Result
Undefined false
Null false
Boolean 直接返回
Number +0 -0 NaN -> false
其他为true
String 空字符串(length为0) -> false
其他为true
Object true

ToPrimitive - 规范9.1

顾名思义，该抽象操作定义了该如何将值转为基础类型(非对象)，接受2个参数，第一个必填的要转换的值，第二个为可选的hint，暗示被转换的类型。

按照以下规则转换被传递参数

Argument Type Result
Undefined 直接返回
Null 直接返回
Boolean 直接返回
Number 直接返回
String 直接返回
Object 返回一个对象的默认值。一个对象的默认值是通过调用该对象的内部方法[[DefaultValue]]来获取的，同时传递可选参数hint。

[[DefaultValue]] (hint) - 规范8.12.8

当传递的hint为 String 时候，

如果该对象的toString方法可用则调用toString

如果toString返回了一个原始值(除了object的基础类型)val，则返回val

如果该对象的valueOf方法可用则调用valueOf方法

如果valueOf返回了一个原始值(除了object的基础类型)val，则返回val

抛出TypeError的异常

当传递的hint为 Number 时候，

如果该对象的valueOf方法可用则调用valueOf方法

如果valueOf返回了一个原始值(除了object的基础类型)val，则返回val

如果该对象的toString方法可用则调用toString

如果toString返回了一个原始值(除了object的基础类型)val，则返回val

抛出TypeError的异常

hint的默认值为Number，除了Date object

举个栗子

var a = {}
a.toString = function () {return 1}
a.valueOf = function () {return 2}
String(a) // "1"
Number(a) // 2
a + "" // "2"   ???????
+a // 2
a.toString = null
String(a) // "2"
a.valueOf = null
String(a) // Uncaught TypeError: balabala

似乎我们发现了一个很不合规范的返回值，为什么 a + ""不应该返回"1"吗

问题的答案其实很简单 + 操作符会对两遍的值进行 toPrimitive 操作。由于没有传递 hint 参数，那么就会先调用a.valueOf 得到2后因为+右边是字符串，所以再对2进行ToString抽象操作后与""的字符串拼接。

不要畏惧使用 ==

基础概念已经了解了，那么在 == 中到底发生了什么样的类型转换，而导致了经常产生出乎意料的bug，导致了它臭名昭著。

抽象相等 - 规范11.9.3

x == y 判断规则如下:

如果xy类型相同 (与严格相等判断一致，不赘述了，详见规范)

如果 x 为 null y 为 undefined, 返回true

如果 x 为 undefined y 为 null, 返回true

如果 x 类型为 Number, y 类型为 String, 返回 x == ToNumber(y)

如果 x 类型为 String, y 类型为 Number, 返回ToNumber(x) == y

如果 x 类型为 Boolean, 返回 ToNumber(x) == y

如果 y 类型为 Boolean, 返回 x == ToNumber(y)

如果 x 类型为 String 或 Number, y 类型为 Object, 返回 x == ToPrimitive(y)

如果 x 类型为 Object, y 类型为 String 或 Number, 返回 ToPrimitive(x) == y

return false

再看引入

  [] == [] // false
  // 1. 两遍类型都为 Object，比较引用地址，不同返回false 搞定
  [] == ![] // true
  // 1. ![]强制类型转换 变为 [] == false
  // 2. 根据规范第7条，返回 [] == ToNumber(false), 即 [] == 0
  // 3. 根据规范第9条，返回ToPromitive([]) == 0，数组的valueOf为本身，不是原始值，则返回toString()即 "" == 0
  // 4. 根据规范第5条，返回ToNumber("") == 0, 即 0 == 0
  // 5. 根据规范第1条，返回 true

  // 下面的不赘述了，分析类似上面
  {} == !{} // false
  {} == {} // false

我们不难看出以下几点

其实在x y类型相同的时候，== 与 === 没有任何区别。

除了undefined与null, 大多数值都会转换为相同类型后进行对比，也就是说 === 是 == 某些情况下必经的步骤

引用 << 你不知道的JS(中) >> 中的2句话



如果两遍的值中有 true 或者 false , 千万不要使用 == (会被转为数字0,1来进行判断，会出现一些意外的情况)


如果两遍的值中有[]、""或者0，尽量不要使用 ==
抽象比较

先来看看这个例子

var a = { b: 42 }
var b = { b: 43 }
a < b // false
a == b // false
a > b // false

a <= b // true
a >= b // true

是不是感觉到世界又崩塌了？？？

让我们来仔细分析一下

var a = { b: 42 }
var b = { b: 43 }
a < b // false 
// 1. 两遍调用ToPrimitive, 返回[object Object] 两遍一致 返回 false
a == b // false
// 两遍不同的引用，返回false
a > b // false
// 同 a < b

a <= b // true
// 按规范其实是处理成 !(a > b) 所以为true
a >= b // true

所以在不相等比较的时候，我们最后还是进行手动的类型转换较为安全

总结

深入了解类型转换的规则，我们就可以很容易取其精华去其糟粕，写出更安全也更简洁可读的代码。

参考

你不知道的JS(中)

ecma-262 5.1规范

如果喜欢可以star一下，会不断更新github地址

GPU服务器 海外云主机 php从0开始 从0开始学习php 汇编语言从0开始 从0开始数据分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95058.html

相关文章

  • 如何&quot;有计划，高效率，优简历&quot;应对面试

    摘要：虽然有了十全的计划，但如何高效率去记住上面那么多东西是一个大问题，看看我是怎么做的。 前言 前一篇文章讲述了我在三月份毫无准备就去面试的后果，一开始心态真的爆炸，但是又不服气，一想到每次回来后家人朋友问我面试结果的期待脸，越觉得必须付出的行动来证明自己了。 面经传送门：一个1年工作经验的PHP程序员是如何被面试官虐的？ 下面是我花费两个星期做的准备，主要分三部分： 有计划——计划好...

    gyl_coder 评论0 收藏0

  • Html/Css/Jquery知识点集锦

    摘要：首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。接着，再次使用将和分离开来，这样已经独立识别。元素不能用作语义用途以外的其他目的。Html1、Html5有哪些新特性，移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区别HTML和HTML5?HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。拖拽释放(Drag and drop) ...

    shiweifu 评论0 收藏0

  • 使用 &quot;5W1H&quot; 写出高可读的 Git Commit Message

    摘要：共字，读完需分钟。下面提出一种可以帮你写出高可读的实践方法，这个方法并非原创，最早的实践来自于这篇文章。本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。 showImg(https://segmentfault.com/img/remote/1460000009341335?w=1240&h=403); 共 1926 字，读完需 4 分钟。所有工程师都知道，代码是编写...

    DevYK 评论0 收藏0

  • 《HelloGitHub》第 68 期

    摘要：整个项目简单还具有实用价值，可作为的实战项目学习的调试工具栏。查看文档自动在个人首页展示编程时长的工具。通过学习这些前沿的人工智能论文，提前了解在未来更多可能性可以将图片和视频转换成漫画风格的工具。兴趣是最好的老师，HelloGitHub 让你对编程感兴趣！简介HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。https://github.com/521xueweihan...

    番茄西红柿 评论0 收藏2637

发表评论

登陆后可评论

0条评论

tianyu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<