在JavaScript中还有一个另外一个运算符===。那么这两者有何不一样呢?这篇文章就一起来看看JavaScript中=====有何不同。

关系表达式

=====都是JavaScript中的关系表达式运算符,与对应的还有!=!==

=====运算符主要用于比较两个值是否相等。当然它们对相等的定义不尽相同。两个运算符允许任意类型的操作数,如果操作数相等则返回true,否则返回false

==和===定义

=====虽然都是关系表达式运算符,但它们的定义是有所不同的:

  • ==:称作相等运算符(Equality Operator),它用来检测两个操作是否相等,这里的相等的定义非常宽松,可以允许类型的转换
  • ===:称作严格相等运算符(Strict Equality),也被称之为恒等运算符(Identity Operator)或全等运算符,它用来检测两个操作数是否严格相等

== 和 ===运算规则

JavaScript中=====运算符,它们的运算都具有自己的运算规则。

==运算规则

==运算符对于两个数比较并不严格。如果两个操作数不是同一类型,那么相等运算符会尝试进行一些类型转换,然后进行比较。

在转换不同的数据类型时,其会遵循下列基本原则:

如果两个操作数的类型相同,则会按照严格相等的比较规则一样,如果严格相等,那么比较结果为相等。如果它们不严格相等,则比较结果为不相等。

如果两个操作数的类型不同,==相等操作符也可能会认为它们相等。检测相等将会遵守下面的规则和类型转换:

如果一个值是null, 另一个是undefined,则它们是相等:

null == undefined; // => true 

如果一个值是数字,另一个是字符串,先将字符串转换为数值,然后使用转换后的值进行比较:

1 == '1'; // => true 

如果其中一个值是true,则将其转换为1再进行比较。如果其中一个值是false,则将其转换为0再进行比较:

true == 0;   // => false false == 1;  // => false true == 1;   // => true false == 0;  // => true true == '1'; // => true false == '0';// => true 

如果一个值是对象,另一个值是数字或字符串,将会先使用toString()valueOf()将对象转换为原始值,然后再进行比较。

两个操作数在进行比较时则要遵循下列规则:

  • nullundefined是相等的
  • 要比较相等性之前,不能将nullundefined转换成其他任何值
  • 如果有一个操作是NaN,则相等操作符返回false,而不相等操作符返回true重要提示: 即使两个操作数都是NaN,相等操作符也返回false,因为按照规则 ,NaN不等于NaN
  • 如果两个操作数都是对象,则比较它们是不是同一个对象。如果两个操作数都指向同一个对象,则相等操作符返回true,否则返回false

来看一下对象的比较:

var a = [1,2,3]; var b = [1,2,3];  var c = { x: 1, y: 2 }; var d = { x: 1, y: 2 };  var e = "text"; var f = "te" + "xt";  a == b       // =>false c == d       // =>false e == f       // =>true 

对于两个操作数var1==var2,下图能表达的很清楚:

图中绿色的方框表示返回的值为true,其它的表示返回的值为false。同样可以使用另一张图来表述:

图中橙色的方框表示返回的值为true,其它的表示返回的值为false

===运算规则

严格相等运算符===首先要计算其操作数的值,然后比较这两个值,比较过程没有任何类型转换。其运算规则遵循下面的规则:

如果两个值类型不相同,则它们不相等

true === '1'; // => false 

其中操作数true是布尔值,而'1'是字符串值。

如果两个者都是null或者都是undefined,则它们相等:

null === null; // => true undefined === undefined; // => true null === undefined; // =>false 

如果两个值都是布尔值truefalse,则它们相等:

true === true;   // =>true false === false; // =>true true === 1;      // =>false true === '1';    // =>false false === 0;     // =>false false === '0';   // =>false 

如果其中一个值是NaN,或者两个值都是NaN,则它们不相等。NaN和其他任何值都是不相等的,包括它本身。通过x !== x来判断x是否为NaN,只有在xNaN的时候,这个表达式的值才为true

如果两个值为数字且数值相等,则它们相等。如果一个值为0,另一个值为-0,则它们同样的相等。

如果两个值为字符串,且所含的对应位上的16位数完全相等,则它们相等。如果它们的长度或内容不同,则它们不等。两个字符串可能含义完全一样且所显示出的字符也一样,但且有不同编码的16位值。JavaScript并不对Unicode进行标准化的转换,因此像这样的字符串通过=====运算符的比较结果也不相等。在JavaScript中字符串的比较提供了一个String.localeCompare()方法。

如果两个引用值指向同一个对象,数组或函数,则它们是相等的。如果指向不同的对象,则它们是不等的,尽管两个对象具有完全一样的属性。

var a = [1,2,3]; var b = [1,2,3]; var c = a;  var ab_eq = (a === b); // false (even though a and b are the same type) var ac_eq = (a === c); // true  var a = { x: 1, y: 2 }; var b = { x: 1, y: 2 }; var c = a;  var ab_eq = (a === b); // false (even though a and b are the same type) var ac_eq = (a === c); // true  var a = { }; var b = { }; var c = a;  var ab_eq = (a === b); // false (even though a and b are the same type) var ac_eq = (a === c); // true 

同样对于var1 === var2也可以用图来表达:

上图中绿色的方框表示返回的值为true,白色的方框表示返回的值为false。除了上图之外,下面这张图也表达的是同样的意思:

上图中橙色的方框表示返回的值为true,白色的方框表示返回的值为false

在JavaScript中比较运算符不仅仅是=====。还有其它的比较运算符,比如<=>=。综合起来,也可以使用一张图表述:

  • 红色:===
  • 橙色:==
  • 黄色:<=>=同时成立,==不成立
  • 蓝色:只有>=
  • 绿色:只有<=

有关于JavaScript中=====更多的讨论,可以点击这里和这里。

!= 和 !==

在JavaScript中还有两个运算符和=====类似,它们是!=!===。在JavaScript中,!=!==运算符的检测是=====运算符的求反。如果两个值通过==的比较结果为true,那么通过!=的比较结果则为false。如果两个值通过===的比较结果为true,那么通过!==的比较结果则为false

总结

这篇文章简单的总结了JavaScript中的=====运算符的规则,以前这两个运算符中不同之处。简单的只需要记住==表示两个操作数相同,===表示来格相等(恒等或全等),!=称为不相等,!==表示不严格相等。

一起来看看JavaScript中==和===有何不同的更多相关文章

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  7. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  9. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

  10. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

随机推荐

  1. Git-管理和撤销修改

    一.管理修改 为什么说Git管理的是修改,而不是文件呢?我们还是做实验.第一步,对readme.txt做一个修改,比如加一行内容: Git is a distributed version contr ...

  2. zookeeper的安装与配置(单机和集群)

    单机模式: 1.首先去官网下载zookeeper的包 zookeeper-3.4.10.tar.gz 2.用FTP上传到服务器或者Linux虚拟机的/usr/local目录下 3.解压文件tar -z ...

  3. 基于cytoscape.js 、 d3.js实现的关系图谱初级版本

    前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...

  4. 【sping揭秘】13、Spring AOP一世&二世

    Spring AOP一世 Spring AOP中的advice Before advice 这个就是在方法执行之前执行,也就是在对应的joinpoint之前 spring AOP二世 开启aspect ...

  5. Qt中QMenu的菜单关闭处理方法

    Qt中qmenu的实现三四千行... 当初有个特殊的需求, 要求菜单的周边带几个像素的阴影, 琢磨了半天, 用QMenu做不来, 就干脆自己用窗口写一个 然而怎么让菜单消失却非常麻烦 1. 点击菜单项 ...

  6. Android中常见的对话框

    1. 普通对话框 public void click01(View view){ AlertDialog.Builder builder = new AlertDialog.Builder(this) ...

  7. Java类加载顺序

    很长时间没看这方面的内容了,写篇文章让自己牢记一下,顺便分享一下. 首先,写代码以便检验结果.测试代码: public class Test { public static void main(Str ...

  8. 修改vs2012 颜色

    http://bbs.pcbeta.com/viewthread-1265615-1-1.html VS2012的默认深色主题的确让整个IDE看起来很有气场,而且深色的主题保护眼睛,还是蛮不错的. 但 ...

  9. asp.net调用js方法

    C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> fu ...

  10. js去除字符串中的标签

    var str="<p>js去除字符串中的标签</p>"; var result=str.replace(/<.*?>/ig,"&qu ...