JS类型（一）：深入讨论“==”与“===”

Wildcard 发布于2019-08-21 16:56 / 908人阅读

摘要：如果与相同，执行严格相等运算。如果是布尔值，返回的结果。，需要两个操作数同时转为。四附录常见的引用对象转基本类型的例子对象或者非空对象转基本类型返回数组转基本类型，返回数组元素合集组成的字符串，每个元素用，连接

一：前言

写前端代码的一个避不开的问题：“==” “===”到底是怎么回事？
下面是大众的理解：

1. "=="指的是数值的相等。即使类型不一致，转化后的值相等，还是返回true
2. "==="指的是类型和数值都相等，如果类型不一致就直接呵呵了

然而记住了这些并没有什么用，上面的说法太不具体了，该出错的时候还是会出错。

二：正文

1.“==”是怎么回事？

0 == null

上面的表达式返回true还是false？？

在读懂规格上，下面是算法细节。

ReturnIfAbrupt(x).
ReturnIfAbrupt(y).
If Type(x) is the same as Type(y), then
Return the result of performing Strict Equality Comparison x === y.
If x is null and y is undefined, return true.
If x is undefined and y is null, return true.
If Type(x) is Number and Type(y) is String,
return the result of the comparison x == ToNumber(y).
If Type(x) is String and Type(y) is Number,
return the result of the comparison ToNumber(x) == y.
If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
If Type(x) is either String, Number, or Symbol and Type(y) is Object, then
return the result of the comparison x == ToPrimitive(y).
If Type(x) is Object and Type(y) is either String, Number, or Symbol, then
return the result of the comparison ToPrimitive(x) == y.
Return false.

上面这段算法，一共有12步，翻译如下。

如果x不是正常值（比如抛出一个错误），中断执行。
如果y不是正常值，中断执行。
如果Type(x)与Type(y)相同，执行严格相等运算x === y。
如果x是null，y是undefined，返回true。
如果x是undefined，y是null，返回true。
如果Type(x)是数值，Type(y)是字符串，返回x == ToNumber(y)的结果。
如果Type(x)是字符串，Type(y)是数值，返回ToNumber(x) == y的结果。
如果Type(x)是布尔值，返回ToNumber(x) == y的结果。
如果Type(y)是布尔值，返回x == ToNumber(y)的结果。
如果Type(x)是字符串或数值或Symbol值，Type(y)是对象，返回x == ToPrimitive(y)的结果。
如果Type(x)是对象，Type(y)是字符串或数值或Symbol值，返回ToPrimitive(x) == y的结果。
返回false。

引用MDN上的一张图就是：

由于0的类型是数值，null的类型是Null（这是规格4.3.13小节的规定，是内部Type运算的结果，跟typeof运算符无关）。因此上面的前11步都得不到结果，要到第12步才能得到false。

0 == null // false

上面12条规则，对于“==”部分可以用一张图的总结：

前面说得很乱，根据我们得到的最终的图3，我们总结一下==运算的规则：

undefined == null，结果是true。且它俩与所有其他值比较的结果都是false。

String == Boolean，需要两个操作数同时转为Number。

String/Boolean == Number，需要String/Boolean转为Number。

Object == Primitive，需要Object转为Primitive(具体通过valueOf和toString方法)。

对这张图的详细介绍可以查看文章：https://segmentfault.com/a/11...
2.“===”又是怎么回事？
这个比较简单了，"==="是严格意义上的相等，必须要了类型和值都相等才返回true,否则返回false。所以在判断的时候比较容易就能看出来（一模一样才是true）。

三.扩展延伸

比较是否相等有三种方法：

=== 严格的相等

== 宽松的相等

Object.is

一张表格来说明它们之间的区别：

这里主要注意 NaN 、 -0 +0这两对表现得不一致情况。

四.附录：常见的引用对象转基本类型的例子

1.对象({}或者非空对象)转基本类型返回"[object Object]"

const obj = {};
obj.toString();//"[object Object]"
obj.name="name";
obj.toString();//"[object Object]"

2.数组转基本类型，返回数组元素合集组成的字符串，每个元素用"，"连接

[].toString();//""
[1,2].toString();//"1,2"
[[1,2],3].tonString();//"1,2,3"

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

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

javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
前端每周清单第 48 期：Slack Webpack 构建优化，CSS 命名规范与用户追踪，Vue.

摘要：发布是由团队开源的，操作接口库，已成为事实上的浏览器操作标准。本周正式发布，为我们带来了，，支持自定义头部与脚部，支持增强，兼容原生协议等特性变化。新特性介绍日前发布了大版本更新，引入了一系列的新特性与提升，本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...

sean 2019-08-22 13:57 评论0 收藏0
【进阶1-3期】JavaScript深入之内存空间详细图解

摘要：进阶期理解中的执行上下文和执行栈进阶期深入之执行上下文栈和变量对象但是今天补充一个知识点某些情况下，调用堆栈中函数调用的数量超出了调用堆栈的实际大小，浏览器会抛出一个错误终止运行。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第3天。本计划一共28期，每期重点攻...

coordinate35 2019-08-23 13:47 评论0 收藏0