JavaScript中三个等号和两个等号你了解多少


Posted in Javascript onJuly 04, 2017

引子

众所周知,用在if条件判断语句中,js有六种假值:false, null, undefined, '', NAN, 0。先来看几个例子:

[] === []
NaN === NaN
NaN == NaN
0 == []
'' == []
'' == {}
[] == undefined
{} == []
null == undefined

以上这些判断结果是什么,大家能否一看就知道结果呢?笔者以前对==和===都只有大概的印象,相信大家也都知道,== 判断如果两边变量的类型不同,会将其先做类型转换再作判断,而 === 则不做类型转换,如果类型不同,就一定返回 false。但是笔者最近看到了一个题目,感觉很有意思,贴出来给大家看看:

var x = 1;
var obj = {
  valueOf: function(){ 
    x = 2; 
    return 0 
    }
  }
console.log(obj == 0, x)

恩,这段代码输出的结果是 true, 2,是不是不可思议?还有~

var x = 1;
var obj = {
  valueOf: function(){ 
    return {} 
  }, 
  toString: function(){ 
    return {}
  }
 }
 console.log(obj == 0)

这段代码直接抛出了异常: Uncaught TypeError: Cannot convert object to primitive value。

如果你和我一样觉得很奇怪,那就继续往下看吧~

=== 的规则

这个比较简单,我把规则罗列一下

  1. 如果类型不同,就不相等
  2. 如果两个都是数值,并且是同一个值,那么相等,例外的是,如果其中至少一个是NaN,那么不相等。(判断一个值是否是 NaN,只能用isNaN() 来判断)
  3. 如果两个都是字符串,每个位置的字符都一样,那么相等;否则不相等。
  4. 如果两个值都是true,或者都是false,那么相等。
  5. 如果两个值都引用同一个对象或函数,那么相等;否则不相等。
  6. 如果两个值都是null,或者都是undefined,那么相等。

这里不难发现,复合类型的数据(比如对象、数组、函数等)之间的比较不是比较他们的值是否相等,而是比较他们引用的对象是否一样,因此也不难明白,为什么 [] === [] 判断为false了。

比如:

JavaScript中三个等号和两个等号你了解多少

== 探究

看下 == 的规则

  1. 如果两个值类型相同,进行 === 比较。
  2. 如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
  3. 如果一个是null、一个是undefined,那么相等。
  4. 如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
  5. 如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
  6. 如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。 js核心内置类,会尝试valueOf先于toString。例外的是Date,Date利用的是toString转换。非js核心的对象,会比较麻烦,有兴趣的同学可以研究一下
  7. 任何其他组合,都不相等。

看到这里,第六条,我们就可以明白,为什么上面的代码会输出意想不到的结果甚至抛出错误了。

再来看一题:

if (x == 10) 
  x += 5

根据上面的规则,试想一下,如果我们输入的x是字符串20,那么x的结果会变成什么样?没错,就是205,而往往这种情况我们的目的是想计算20+5的值。

综合上面的例子,不难看出,== 的比较看似会比较方便,比如 1 == '1' ,但是会埋下隐患,比如可能对类型做出错误的假设。因此大多数人建议我们少用== 而尽量使用 ===,事实上我也推荐如果明确知道类型,还是最好用===。

再举个简单的例子:团队协作中你肯定需要读别人的代码。而当你看到==时,要判断清楚作者的代码意图是确实需要转型,还是无所谓要不要转型只是随手写了,还是不应该转型但是写错了……所花费的脑力和时间比明确的===(加上可能需要的明确转型)要多得多。这样一想,===不要好太多。

明白了==的机制,那么判断这6个假值,就变得容易了。

简单看看几个例子,大家看看是真是假~

false == ''
false == []
0 == []
'' == []
[] == []
[] == {}
null == undefined
false == undefined

总结

可以用一张图来表达 == 返回true的几个假值:

JavaScript中三个等号和两个等号你了解多少

一、首先看双等号前后有没有NaN,如果存在NaN,一律返回false。

二、再看双等号前后有没有布尔,有布尔就将布尔转换为数字。(false是0,true是1)

三、接着看双等号前后有没有字符串, 有三种情况:

  1. 对方是对象,对象使用toString()或者valueOf()进行转换;
  2. 对方是数字,字符串转数字;
  3. 对方是字符串,直接比较;
  4. 其他返回false
  5. 如果是数字,对方是对象,对象取valueOf()或者toString()进行比较, 其他一律返回false
  6. null, undefined不会进行类型转换, 但它们俩相等

后记

我的建议是:如果你的的确确知道你在做什么(了解类型转换的结果),可以用==;否则还是用===吧。

在网上无意中看到的图,大家可以参考看看:

==号

JavaScript中三个等号和两个等号你了解多少

===号

JavaScript中三个等号和两个等号你了解多少

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
原生js实现简单的链式操作
Jul 04 #Javascript
详解用vue编写弹出框组件
Jul 04 #Javascript
使用vue构建一个上传图片表单
Jul 04 #Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 #Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 #Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 #Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 #Javascript
You might like
php木马攻击防御之道
2008/03/24 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
幼师自荐信
2013/10/26 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
2014年学前班工作总结
2014/12/08 职场文书
检讨书格式
2015/01/23 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
2015年科协工作总结
2015/05/19 职场文书
淮海战役观后感
2015/06/11 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python