当前位置:首页 > 日记 > 正文

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

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

引子

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

[] === []NaN === NaNNaN == NaN0 == []'' == []'' == {}[] == 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了。

比如:

== 探究

看下 == 的规则

  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 == undefinedfalse == undefined

总结

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

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

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

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

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

后记

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

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

==号

===号


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

相关文章

PS线稿上色小过程解析

PS线稿上色小过程解析

过程,电脑软件,PS,   今天小编分享的是一个线稿上色的小过程,需要手绘板,人设概念,一定的美术功底(起码明白光影明暗),必要的脑补能力。一起来看看吧!PS线稿上色的方法技巧我们的效果图观察线稿,然后确定光源方向,脑补人设原型。把线…

PHP编辑器PhpStrom运行缓慢问题

PHP编辑器PhpStrom运行缓慢问题

运行,编辑器,缓慢,电脑软件,PHP,最近在使用phpstorm开发项目的时候,在加载文件运行时,不管有多大,如果项目文件数据比较多的话,都能够让phpstorm卡到死机。其中调整过内存设置,关闭过动态提示,使用过phpstorm的安全模式,都不能解决卡的问题。中间…

ps实例讲解智能对象对模型的妙用

ps实例讲解智能对象对模型的妙用

模型,智能,对象,妙用,实例,版权申明:本文原创作者"孙圣朝",感谢"孙圣朝"的原创经验分享!PS智能对象是把位图和矢量图完美结合的桥梁。在设计工作中,我们合理的利用PS智能对象来处理我们设计的模型,或者是样机能在很大程度上提升我们的工作效…

jQuery 实现双击编辑表格功能

jQuery 实现双击编辑表格功能

双击,表格,编辑,功能,电脑软件,先给大家展示下效果图:下面用简单方法实现的简单表格编辑功能:简单的HTML代码略过了,下面是js实现过程JavaScript:<span style="font-size:18px;">$(".tables").on("dblclick","td",function(){ if($…

word音乐符号怎么打 音乐符号大全

word音乐符号怎么打 音乐符号大全

音乐,符号,大全,电脑软件,word,有时输入文字时会用到音乐符号,但是音乐符号怎么打呢?小编也不是专业的学音乐的人士,只找到了两种比较简单并可行的方法供大家使用:1.复制粘贴音乐符号:? ? ? ? ∮ ※ &there4; ∵? ∽ ?? ? ? ? &para; ‖? ? &se…

php脚本运行时的超时机制详解

php脚本运行时的超时机制详解

脚本,运行,机制,超时,详解,在做php开发的时候,经常会设置max_input_time、max_execution_time,用来控制脚本的超时时间。但却从来没有思考过背后的原理。趁着这两天有空,研究一下这个问题。超时配置php的ini配置如何起作用,这是一个老生常谈的…

引导头设置跨行无效解

引导头设置跨行无效解

跨行,无效,设置,电脑软件,最近,一种报表界面的形式是自举的形式。它不需要报告的功能。它只需要预览、行和行,不需要根据数据量进行更改。如果有一个更好的框架,欢迎推荐。发现十字线属性的行标题的设置是invalid.html如下: 功能分类 二列 第…

详解Vuex中mapState的具体用法

详解Vuex中mapState的具体用法

详解,电脑软件,Vuex,mapState,今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了。真是天雷滚滚~~~~~~index.jsimport Vue from 'vue'import Vuex from 'vuex'import mutations from './mutatio…

ps打造音乐类文字人像海报

ps打造音乐类文字人像海报

音乐,文字,人像,海报,电脑软件,   ps除了可以处理图像之外,它的文字设计功能也是非常不错的,今天的这个教程文字人像的制作思路并不复杂,大致分为两个步骤:首先制作文字背景,文字可以随意排列组合。然后加入人像,并用文字选区复制人…

详细解释最透明的CSS透明度和IE版

详细解释最透明的CSS透明度和IE版

过滤器,透明,解释,透明度,版本,CSS3透明度透明度属性必须被广泛使用,作为浏览器不支持CSS3如何做透明处理,让浏览器的结果。这估计谁都会写,但涉及到不同的特定的语法意义和过滤写的各种版本,很多人都是不准确的,在丹尼尔我也问了很多组,说的不是…

PS怎样去除脸上的痘痘

PS怎样去除脸上的痘痘

痘痘,脸上,电脑软件,PS,画像上有许多天花。如何做PS图象处理软件的刷机工具可以很容易做到的。让我们从小学习编辑器。 去除面部痘痘的PS教程 效果说明:打开图片如图所示,可以看到人物脸上有小痘痘,影响外观。 的操作为例,详细说明如何使用各…

如何给Word2003文档中插入带有引出

如何给Word2003文档中插入带有引出

文档,标注,矩形,图片,电脑软件,  word文档中图片为了能够给用户更好的体验效果,给予标记。给图片插入创建带有引出线的矩形标注,此方法相对来说更加直观一些。以下是小编为您带来的关于给Word2003文档中图片插入创建带有引出线的矩形标注,希…