首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript高阶教程之“==”隐藏下的类型转换

Posted in Javascript onApril 11, 2019

抛砖引玉

按照正常的逻辑来说，我们判断两个值是否相等会遵循以下规则：

JavaScript高阶教程之“==”隐藏下的类型转换

但是我看下面一组值：

[]==0 //true
[]==false //true
[]==!{} //true
[10]==10 //true
'0'==false //true
''==0 //true
undefined==null //true 
!null==true //true

居然没有按照我们的剧本走，那它比较规则又是什么？下面我就来分析一波。

“==”的比较规则

首先我们先去ECMAScript5.1中文版（ http://lzw.me/pages/ecmascrip... ）找一下“==”的比较规则，如下：

1.若Type(x)与Type(y)相同， 则
    a.若Type(x)为Undefined， 返回true。
    b.若Type(x)为Null， 返回true。
    c.若Type(x)为Number， 则
        i.若x为NaN， 返回false。
        ii.若y为NaN， 返回false。
        iii.若x与y为相等数值， 返回true。
        iv.若x 为 +0 且 y为−0， 返回true。
        v.若x 为 −0 且 y为+0， 返回true。
        vi返回false。
    d.若Type(x)为String, 则当x和y为完全相同的字符序列（长度相等且相同字符在相同位置）时返回true。 否则， 返回false。
    e.若Type(x)为Boolean, 当x和y为同为true或者同为false时返回true。 否则， 返回false。
    f.当x和y为引用同一对象时返回true。否则，返回false。
2.若x为null且y为undefined， 返回true。
3.若x为undefined且y为null， 返回true。
4.若Type(x) 为 Number 且 Type(y)为String， 返回comparison x == ToNumber(y)的结果。
5.若Type(x) 为 String 且 Type(y)为Number，返回比较ToNumber(x) == y的结果。
6.若Type(x)为Boolean， 返回比较ToNumber(x) == y的结果。
7.若Type(y)为Boolean， 返回比较x == ToNumber(y)的结果。
8.若Type(x)为String或Number，且Type(y)为Object，返回比较x == ToPrimitive(y)的结果。
9.若Type(x)为Object且Type(y)为String或Number， 返回比较ToPrimitive(x) == y的结果。
10.返回 false

看完ECMAScript5.1中文版的介绍之后，相信很多小伙伴的心情应该是这样的：

JavaScript高阶教程之“==”隐藏下的类型转换

别看上面说的有点花里胡哨的，其实我们可以用很简单的话来总结出来。由于本篇文章核心是“==”是如何进行类型转换，我就总结一下类型不同的情况下“==”是如何比较的。

  • 当数据类型为Boolean类型或者String类型时，比较时需要转换成Number类型。
  • 当数据类型为引用类型时，需要转换成原始数据类型。当转换后的原始数据类型为Boolean类型或者String类型，则继续转换成Number类型。
  • undefined和null跟任何值在“==”下都返回false，但二者在“==”下返回true。

具体流程图如下：

JavaScript高阶教程之“==”隐藏下的类型转换

备注：

Javascript的数据类型可以分为以下两种:

  • 原始数据类型（null、undefined、Number、String、Boolean、Symbol（Es6才引入的））
  • 引用类型 (Object)

Boolean类型、String类型转换成Number类型的规则（ToNumber）

Boolean类型

Boolean Number
true 1
false 0

 

String类型

标准的数字格式
如果是标准的数字格式，转换成Number类型相比不用多说，比如下面这几个栗子?：

"123" => 123
"12.34" => 12.34
"0.12" => 0.12
"-12.34" => -12.34

非标准的数字格式

但是如果是非标准的数据格式，要分两种情况来考虑：

  • 第一种：只包含数字并且最多只有1个点。
  • 第二种：包含非数字以及含有多个1个点。

只包含数字并且最多只有1个点

这种情况下会首先进行补0和去0的操作，下面看几个栗子?：

"01234" => 1234
".1" => 0.1
"12." => 12
"1.000" => 1
"-02.30" => -2.3

包含非数字以及含有多个1个点

这种情况下统统返回NaN，意为“Not a Number”,这里我们要注意一下，NaN还是Number类型，下面看几个栗子?：

"123aa4" => NaN
"哈喽，DD" => NaN
typeof NaN => "numer"

引用类型转换成原始数据类型的规则（ToPrimitive）

在介绍转换规则之前，首先我们我们介绍一下引用类型都带有的两个方法：

  • Object.prototype.toString
  • Object.prototype.valueOf

这二者都可以将引用类型转换成原始数据类型，接下来我们对二者做一个详细的介绍：

Object.prototype.toString

MDN是这样解释的：

The toString() method returns a string representing the object.（toString()这个方法返回一个代表这个对象的字符串）

举个栗子?：

const obj = {}
console.log(String(obj)) //"[object Object]"
obj.toString = function(){
 return 'Hello,Teacher Cang!'
}
console.log(String(obj)) //"Hello,Teacher Cang!"

Object.prototype.valueOf

MDN是这样解释的：

The valueOf() method returns the primitive value of the specified object.（ valueOf()这个方法返回这个对象的原始数据值）

举个栗子?：

const obj = {}
console.log(Number(obj)) //NaN
obj.valueOf = function(){
 return 12345;
}
console.log(Number(obj)) //12345

valueOf和toString的优先级

关于这二者的优先级，在不同的情况下有着不同的优先级，下面我们根据不同情况介绍一下。

ToNumber

看个栗子?：

const obj = {
 toString(){
 console.log('调用了toString');
 return 'Hello,Teacher Cang!';
 },
 valueOf(){
 console.log('调用了valueOf');
 return 12345;
 }
}
console.log(Number(obj)); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了valueOf
12345

通过上面的代码的运行结果，我们得出这么一个结论：

在ToNumber情况下，valueOf的优先级大于toString。

接下里我们看这么一种情况，如果valueOf返回的并不是原始数据类型会怎么样。

const obj = {
 toString(){
 console.log('调用了toString');
 return 12345;
 },
 valueOf(){
 console.log('调用了valueOf');
 return {};
 }
}
console.log(Number(obj)); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了valueOf
调用了toString
12345

从上面的运行结果中，我们可以得出这么一个结论：

在ToNumber情况下，如果valueOf返回的不是原始数据类型，则会自动调用toString。

打破砂锅问到底，再来一个非常极端的情况，如果说valueOf和toString返回的都不是原始数据类型，这时又该怎么样呢？同样，我们继续看一下运行结果：

const obj = {
 toString(){
  console.log('调用了toString');
  return {};
 },
 valueOf(){
  console.log('调用了valueOf');
  return {};
 }
}
console.log(Number(obj)); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了valueOf
调用了toString
Uncaught TypeError: Cannot convert object to primitive value

从上面的运行结果中，我们再次可以得出这么一个结论：

在ToNumber情况下，如果valueOf和toString返回的都不是原始数据类型，那么js会抛出异常，提示无法将引用类型转换原始数据类型。

根据三组代码的运行的结果，我们最后总结一下：

在ToNumber情况下，js会优先调用valueOf，如果valueOf返回的不是原始数据类型，则会接着调用toString，如果toString返回的也不是原始数据类型，js会抛出一个异常，提示无法将引用类型转换原始数据类型。

具体流程图如下：

JavaScript高阶教程之“==”隐藏下的类型转换

ToString

看个栗子?：

const obj = {
 toString(){
  console.log('调用了toString');
  return 'Hello,Teacher Cang!';
 },
 valueOf(){
  console.log('调用了valueOf');
  return 12345;
 }
}
console.log(String(obj)); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了toString
Hello,Teacher Cang!

通过上面的代码的运行结果，我们得出这么一个结论：

在ToString情况下，toString的优先级大于valueOf。

同样我们看一下，toString返回的值不是原始数据类型时会怎样：

const obj = {
 toString(){
  console.log('调用了toString');
  return {};
 },
 valueOf(){
  console.log('调用了valueOf');
  return 'Hello,Teacher Cang!';
 }
}
console.log(String(obj)); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了toString
调用了valueOf
Hello,Teacher Cang!

根据运行结果我们可以得出：

在ToString情况下，如果toString返回的不是原始数据类型，则会自动调用valueOf。

最后我们看一下极端情况，二者返回的都不是原始数据类型：

const obj = {
 toString(){
  console.log('调用了toString');
  return {};
 },
 valueOf(){
  console.log('调用了valueOf');
  return {};
 }
}
console.log(String(obj)); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了toString
调用了valueOf
Uncaught TypeError: Cannot convert object to primitive value

我们又发现：

在ToString情况下，如果toString和valueOf返回的都不是原始数据类型，那么js会抛出异常，提示无法将引用类型转换原始数据类型。

我们将三个结论综合一下：

在ToString情况下，js会优先调用toString，如果toString返回的不是原始数据类型，则会接着调用valueOf，如果valueOf返回的也不是原始数据类型，js会抛出一个异常，提示无法将引用类型转换原始数据类型。

具体流程图如下：

JavaScript高阶教程之“==”隐藏下的类型转换

“==”下的valueOf和toString的优先级

从文章前面我们总结出来“==”的比较流程来看，引用类型转换成原始数据类型之后，如果是Sting类型的话，还要再次转成Number类型，因此“==”下的引用类型转换原始数据类型过程中，遵循ToNumber的优先级规则。

const obj = {
 toString(){
  console.log('调用了toString');
  return 'Hello,Teacher Cang!';
 },
 valueOf(){
  console.log('调用了valueOf');
  return 12345;
 }
}
console.log(obj==12345); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了valueOf
true
const obj = {
 toString(){
  console.log('调用了toString');
  return 12345;
 },
 valueOf(){
  console.log('调用了valueOf');
  return {};
 }
}
console.log(obj==12345); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了valueOf
调用了toString
true
const obj = {
 toString(){
  console.log('调用了toString');
  return {};
 },
 valueOf(){
  console.log('调用了valueOf');
  return {};
 }
}
console.log(obj==12345); 

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了toString
调用了valueOf
Uncaught TypeError: Cannot convert object to primitive value

“==”之外的类型转换

“==”号只涉及到了ToPrimitive和ToNumber这两种转换，ToBoolean和ToString这两个没有涉及到的我们也介绍一下。

ToBoolean

对于ToBoolean，我们只需要记住几个特例是转成false的，其余的皆为true。

Boolean('') => false
Boolean(undefined) => false
Boolean(null) => false
Boolean(0) => false

ToString

Number to String

Number转String之前，首先会做一个去0和补0的操作，然后再去转成String类型。

String(1.234) => "1.234"
String(NaN) => "NaN"
String(.1234) => "0.1234"
String(1.23400) => "1.234"

Boolean to String

String(true) => "true"
String(false) => "false"

null和undefined to String

String(null) => "null"
String(undefined) => "undefined"

引用类型 to String

引用类型先ToPrimitive转换成原始数据类型，若转换后的原始数据类型不是String类型，再做String类型的转换。

const obj = {
 toString(){
  console.log('调用了toString');
  return true;
 }
}
console.log(String(obj))

控制台输出结果：
>>>>>>>>>>>>>>>>>>
调用了toString
"true"

总结

“==”下的类型转换，要分为两种情况来考虑。第一种，原始数据类型；第二种，引用类型。原始数据类型中String类型和Boolean类型是需要转换成Number类型再去比较的，而引用类型则需要先转换成原始数据类型再进行后续的转换。搞清整个流程之后，我们再去理解“==”涉及到的ToNumber和ToPrimitive是如何进行转换的。按照这样子的理解步骤走，我们对“==”隐藏下的类型转换会有比较清晰的认识。另外，“==”不涉及到ToString和ToBoolean的类型转换，在文章的后面部分我也加上去了，希望可以给小伙伴们一个更加全面的类型转换的认识。最后附上完整的“==”类型转换的流程图：

JavaScript高阶教程之“==”隐藏下的类型转换

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对三水点靠木的支持。

JavaScript高阶教程之“==”隐藏下的类型转换

- Author -

wuming

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 #Javascript
详解jQuery设置内容和属性
Apr 11 #jQuery
js作用域和作用域链及预解析
Apr 11 #Javascript
关于js陀螺仪的理解分析
Apr 11 #Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 #Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 #Javascript
vue实现新闻展示页的步骤详解
Apr 11 #Javascript
S500(1) Grundig(1) S700(1) PL450(1) PL990(2) ATS-909X(1) S400(1) ICF-SW07(1) BCL3000(2) H-501(1)
You might like
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php session 预定义数组
2009/03/16 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python中使用print输出中文的方法
2018/07/16 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
2014年上半年工作自我评价
2014/01/18 职场文书
干部下基层实施方案
2014/03/14 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
Python之matplotlib绘制饼图
2022/04/13 Python
python数据处理之Pandas类型转换
2022/04/28 Python