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 相关文章推荐
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
详解vue组件之间的通信
Aug 30 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
You might like
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
光声世纪笔试题目
2012/08/25 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
公司财务自我评价分享
2013/12/17 职场文书
入党函调证明材料
2014/12/24 职场文书
农村婚庆主持词
2015/06/29 职场文书
学习党史心得体会2016
2016/01/23 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书