实例分析JS中的相等性判断===、 ==和Object.is()

相信刚接触JS的人都会被他的想等性判断给整糊涂,看看下面代码,你能答对几个?

NaN === NaN // false
NaN == NaN // false
Object.is(NaN, NaN) // true
0 == false // true
1 == true // true
Number(null) === 0 // true
null == 0 // false

Javascript提供了三种不同的值比较操作,分别是严格相等、宽松相等、以及Object.is,希望看完下面的内容,能够彻底弄清楚他的判断逻辑。

1. 严格相等 x === y判断逻辑

1、如果x的数据类型和y的数据类型不相同,返回false;

2、如果x是Number类型

  • x是NaN,返回false
  • y是NaN,返回false
  • x的值和y的值相等,返回true
  • x是+0,y是-0,返回true
  • x是-0,y是+0,返回true
  • 否则返回false

3、其他类型参照SameValueNonNumber(x, y)

  • 断言:x,y不是Number类型;
  • 断言: x,y的数据类型相同;
  • x是undefined, y是undefined return true;
  • x是null, y是null,return true;
  • x是字符串类型,当且仅当x,y字符序列完全相同时(长度相同,每个位置上的字符也相同)返回true, 否则返回false;
  • 如果x是布尔类型,当x,y都为true或者都为false时返回true,否则返回false;
  • 如果x是symbol类型,当x,y是相同的symbol值,返回true,否则返回false;
  • 如果x,y是同一个对象值,返回true,否则返回false;
NaN === NaN // false
undefined === undefined // true
null === null // true
undefined === null // false

2. 宽松相等 x == y

  1. 如果x,y的类型相同,返回x===y的结果;
  2. 如果x是null, y是undefined, 返回true;
  3. 如果x是undefined, y是null, 返回true;
  4. 如果x是数值,y是字符串, 返回x == ToNumber(y);
  5. 如果x是字符串,y是数值, 返回ToNumber(x) == y;
  6. 如果x是布尔类型, 返回ToNumber(x)==y 的结果;
  7. 如果y是布尔类型,返回 x==ToNumber(y) 的结果;
  8. 如果x是String或Number或Symbol中的一种并且Type(y)是Object,返回 x==ToPrimitive(y) 的结果
  9. 如果Type(x)是Object并且Type(y)是String或Number或Symbol中的一种,返回 ToPrimitive(x)==y 的结果
  10. 其他返回false
12 == '0xc' // true, 0xc是16进制
12 == '12' // true
12 == '12c' // false, 说明ToNumber转换是用的Number()方法

注意:

Number(null) === 0
但是
null == 0 // false,

2.1 ToNumber将一个值转换为数值类型

详情参考数值类型转换

  • 如果是boolean类型, true返回1,false返回0;
  • 如果是数值,只是简单的传入返回;
  • 如果是null,返回0
  • 如果是undefined, 返回NaN;
  • 如果是字符串,字符串如果只包含数字,则将其转换成十进制数;如果是有效的浮点格式,将其转换成对应的浮点数值;如果是二进制或十六进制将其转换成对应的十进制数值;
  • 如果是对象,调用对象的valueOf()方法,然后依照前面规则转换,如果valueOf返回值是NaN,则调用toString()方法,再依照前面的规则转换返回的字符串

2.2 ToPrimitive

toPrimitive(A)通过尝试调用 A 的A.toString() 和 A.valueOf() 方法,将参数 A 转换为原始值(Primitive);
JS中原始类型有:Number、String、Boolean、Null、Undefined;

不同类型对象的valueOf()方法的返回值:

对象 返回值
Array 返回数组对象本身。
Boolean 布尔值
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC
Function 函数本身
Number 数字值
Object 对象本身。这是默认情况, 可以覆盖自定义对象的valueOf方法
String 字符串值
// Array:返回数组对象本身
var array = ["ABC", true, 12, -5];
console.log(array.valueOf() === array); // true

// Date:当前时间距1970年1月1日午夜的毫秒数
var date = new Date(2013, 7, 18, 23, 11, 59, 230);
console.log(date.valueOf()); // 1376838719230

// Number:返回数字值
var num = 15.26540;
console.log(num.valueOf()); // 15.2654

// 布尔:返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool); // true

// new一个Boolean对象
var newBool = new Boolean(true);
// valueOf()返回的是true,两者的值相等
console.log(newBool.valueOf() == newBool); // true
// 但是不全等,两者类型不相等,前者是boolean类型,后者是object类型
console.log(newBool.valueOf() === newBool); // false

// Function:返回函数本身
function foo(){}
console.log( foo.valueOf() === foo ); // true
var foo2 = new Function("x", "y", "return x + y;");
console.log( foo2.valueOf() );
/*
ƒ anonymous(x,y
) {
return x + y;
}
*/

// Object:返回对象本身
var obj = {name: "张三", age: 18};
console.log( obj.valueOf() === obj ); // true

// String:返回字符串值
var str = "http://www.xyz.com";
console.log( str.valueOf() === str ); // true

// new一个字符串对象
var str2 = new String("http://www.xyz.com");
// 两者的值相等,但不全等,因为类型不同,前者为string类型,后者为object类型
console.log( str2.valueOf() === str2 ); // false

3.同值相等

同值相等由 Object.is 方法判断:

  • 两个值都是 undefined
  • 两个值都是 null
  • 两个值都是 true 或者都是 false
  • 两个值是由相同个数的字符按照相同的顺序组成的字符串
  • 两个值指向同一个对象
  • 两个值都是数字并且
    • 都是正零 +0,
    • 或者都是负零 -0,
    • 或者都是 NaN
    • 都是除零和 NaN 外的其它同一个数字
Object.is('foo', 'foo');  // true
Object.is(window, window); // true

Object.is('foo', 'bar');  // false
Object.is([], []);   // false

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);   // true
Object.is(foo, bar);   // false

Object.is(null, null);  // true

Object.is(true, 'true')  // false

// 特例
Object.is(0, -0);   // false
Object.is(0, +0);   // true
Object.is(-0, -0);   // true
Object.is(NaN, 0/0);   // true

4.零值相等

与同值相等类似,不过会认为 +0 与 -0 相等。

小结

=== 不做类型转换,当两边的数类型不相同时,直接返回false;当前类型相同且都是数值类型的时候,有一个是NaN,那么结果就是false, 另外 +0 === -0

==运算符,当两边操作数类不相同时会做隐式转换,然后才进行比较,这样的话就会出现 false == 0, ‘' == false 等现象, 但是Object.is不会做这种转换

总结

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

(0)

相关推荐

  • Javascript判断对象是否相等实现代码

    在做表单页面的时候,想判断2个js对象,是不是所有完全相同.这里是stackoverflow上的解决办法,在这里记录一下. 复制代码 代码如下: Object.prototype.equals = function(x) { var p; for(p in this) { if(typeof(x[p])=='undefined') {return false;} } for(p in this) { if (this[p]) { switch(typeof(this[p])) { case 'o

  • js中怎么判断两个字符串相等的实例

    在javascript判断两个变量值是否相等,可以使用 ==(等同)操作符 或者 ===(恒等)操作符 == 操作符 "等同"操作符,简单判断2个变量值是否相等,变量类型不一致时,会做类型转换,即忽略变量的类型进行比较 例子1 var str1 = "123456" ; // 字符串 var str2 = "123456" ; // 字符串 alert(str1==str2) ; // 打印出 true,即相等 例子2 var str1 = 12

  • Java与JavaScript中判断两字符串是否相等的区别

    JavaScript是一种常用的脚本语言,这也决定了其相对于其他编程语言显得并不是很规范.在JavaScript中判断两字符串是否相等 直接用==,这与C++里的String类一样.而Java里的等号则是判断两字符串的引用是否一样,判断实体需要用equals()方法,或 者compareTo()方法,这里需要强调的是equals()方法的参数类型,其参数类型绝对不是String类,而是Object类,咱不止一次看 到国内一些教程写的是String类(o(╯□╰)o) 大家可以看看JDK的源码:

  • JS判断两个对象内容是否相等的方法示例

    本文实例讲述了JS判断两个对象内容是否相等的方法.分享给大家供大家参考,具体如下: 我们知道,如果两个对象即使内容,JavaScript也会判断它们不相等.但是有时候,我们仅仅需要判断两个对象的内容是否相等.那么我们应该如何做到且考虑周全呢?比如说0和-0,null和undefined,是不相等的,NaN和NaN默认是不相等的.我写了一个isEqual方法,考虑到了诸多方面,代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • js判断两个日期是否相等的方法

    例如: 复制代码 代码如下: var date1 = new Date("2013-11-29");var date2 = new Date("2013-11-29");console.log(date1 == date2); //false 这里,date1和date2看上去是一样的,但是运行 date1 == date2 返回的却是false.这是因为date1.date2都是对象,类型为引用类型,所以如果需要比较他们,需要去比较他们的字面量值,而不是单纯的用

  • JavaScript中判断两个字符串是否相等的方法

    先将用户的输入值全部转换为大写(或小写),然后再行比较: var name = document.form1.txtUserName.value.toLowerCase(); if(name == "urname") { // statements go here. } JavaScript有两种相等运算符.一种是完全向后兼容的,标准的"==",如果两个操作数类型不一致,它会在某些时候自动对操作数进行类型转换,考虑下面的赋值语句: var strA = "

  • js中判断Object、Array、Function等引用类型对象是否相等

    在迭代中,我们还要注意的是,对象或者数组中的元素可能是一个任意值--除了原始类型值.object.arrray外,这个值还可能是一个方法.一个DOM对象或者window对象,可能你已经注意到了,有部分引用类型是不能进行迭代的,需要分支判断,代码如下: 复制代码 代码如下: function compare(a,b){ var pt = /undefined|number|string|boolean/, fn = /^(function\s*)(\w*\b)/, cr = "constructo

  • 实例分析JS中的相等性判断===、 ==和Object.is()

    相信刚接触JS的人都会被他的想等性判断给整糊涂,看看下面代码,你能答对几个? NaN === NaN // false NaN == NaN // false Object.is(NaN, NaN) // true 0 == false // true 1 == true // true Number(null) === 0 // true null == 0 // false Javascript提供了三种不同的值比较操作,分别是严格相等.宽松相等.以及Object.is,希望看完下面的内容,

  • JS中数据类型的正确判断方法实例

    目录 前言 typeof是否能正确判断类型? instanceof是否能正确判断类型? Object.prototype.toString.call() constructor Array.isArray() 正则判断 总结 前言 Javascript是一门动态类型的语言,一个变量从声明到最后使用,可能经过了很多个函数,而数据类型也会发生改变,那么,对一个变量的数据类型判断就显得尤为重要. typeof是否能正确判断类型? typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数

  • 实例分析javascript中的异步

    js 异步解析 一 .js单线程分析 我们都知道js的一大特点是单线程,也就是同一时间点,只能处理一件事,一句js代码.那为什么js要设计成单线程而不是多线程呢?这主要和js的用途有关,js作为浏览器端的脚本语言,主要的用途为用户与服务端的交互与操作dom.而操作dom就注定了js只能是单线程语言.假如js才取多线程将会出现,多个线程同时对一个dom进行操作的情况,浏览器将无法判断如何渲染.不仅js是单线程,浏览器渲染dom也是单线程的,js的执行和浏览器渲染dom共用的一个线程,这就导致了在h

  • 实例分析JS与Node.js中的事件循环

    这两天跟同事同事讨论遇到的一个问题,js中的event loop,引出了chrome与node中运行具有setTimeout和Promise的程序时候执行结果不一样的问题,从而引出了Nodejs的event loop机制,记录一下,感觉还是蛮有收获的 console.log(1) setTimeout(function() { new Promise(function(resolve, reject) { console.log(2) resolve() }) .then(() => { con

  • 实例分析浏览器中“JavaScript解析器”的工作原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的"JavaScript解析器"开始工作. JavaScript解析器工作步骤: 1."找一些东西": var. function. 参数:(也被称之为预解析) 备注:如果遇到重名分为以下两种情况: 遇到变量和函数重名了,只留下函数 遇到函数重名了,根据代码的上下文顺序,留下最后一个 2.逐行解读代码. 备注:表达式可以修改预解析的值 JS解析器在执行第一步预解析的时候,会

  • 实例分析js事件循环机制

    本文通过实例给大家详细分析了JS中事件循环机制的原理和用法,以下是全部内容: var start = new Date() setTimeout(function () { var end = new Date console.log('Time elapsed:', end - start, 'ms') }, 500) while (new Date() - start < 1000) { } 有其他语言能完成预期的功能吗?Java, 在Java.util.Timer中,对于定时任务的解决方案

  • 一道优雅面试题分析js中fn()和return fn()的区别

    在js中,经常会遇到在函数里调用其它函数的情况,这时候会有 fn() 这种调用方式,还有一种是 return fn() 这种调用方式,一些初学者经常会被这两种方式给绕晕了.这里用一个优雅的面试题来分析一下两种方式的不同之处. var i = 0; function fn(){ i++; if(i < 10){ fn(); }else{ return i; } } var result = fn(); console.log(result); 这是一道隐藏了坑的面试题,看似很简单,大部分人可能想都

  • 实例讲解JS中setTimeout()的用法

    本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"&

  • 实例分析javascript中的call()和apply()方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,argArray]])

  • 分析JS中this引发的bug

    在 js 中,this 这个上下文总是变化莫测,很多时候出现bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就可以了,以下就是我们给大家整理的相关内容: 在JavaScript中有一个很特别.很常用又常常让初学者很困扰的东西 ─ "this",在这堂课中会来谈谈这个"this". this通常会指向一个对象,同时this会在不同的情境下指向不同的对象.让我们来看几个不同的情境,帮助我们更了解"this". window object (

随机推荐