【前端工程师手册】说清楚JavaScript中的相等性判断

简介: 【前端工程师手册】说清楚JavaScript中的相等性判断

有哪些判断相等性的方法


JavaScript现在提供了三种方法来判断相等性:

  1. ===,三个等号即严格相等
  2. ==,两个等号即宽松相等
  3. Object.is(),ES6中用来判断相等的方法


判断相等性的细节


===(严格相等)


被比较的两个数不会进行类型转换,具体的比较过程如下:

  1. 不同类型的值:直接返回false
  2. 同一类型的基本类型的值:比较值是否相同,相同就返回true,不相同就返回false,有一个例外NaN === NaN返回false
  3. 同一类的复合类型的值:比较它们是否指向同一个对象,是就返回true,否则返回false

例子:

var a = 2, b = '2'
a === b // false
undefined === null // false
NaN === NaN // false
+0 === -0 // true
var f = function(){}
var c = f, d = f;
c === d // true
复制代码

==(宽松相等)


宽松相等主要是在某些情况下涉及到隐式类型转换的问题,废话不说,看一下MDN上面对宽松相等的规则总结:

image.png

总结一下就是:

  1. 类型相同时,结果和===一样
  2. undefined和null互相比较时为true,但是它们和其他类型比较时都为false
  3. 原始类型A和原始类型B比较时:ToNumber(A) === ToNumber(B)
  4. 原始类型A和复合类型B比较时:ToNumber(A) == ToPrimitive(B)

那么ToNumber和ToPrimitive这两个方法内部到底是如何判断的呢?查看一下ECMA说明


image.pngimage.pngimage.pngimage.pngimage.pngimage.png

image.png

image.pngimage.png

如果是这么个意思:


ToNumber


  1. undefined,返回NaN
  2. null,返回+0
  3. boolean,true返回1,false返回+0
  4. number,直接返回自身
  5. string,将字符串的内容转换为数字,转换失败则返回NaN。例如"123"这样的就是返回123,"213a"这样的返回NaN
  6. symbol,抛出typeerror错误
  7. object,先调用toPrimitive,再对其结果调用toNumber


ToPrimitive


首先这个方法有两个参数,input和preferredType,如果preferredType是number的话,大致过程如下:

  1. 如果input就是原始类型,直接返回其自身
  2. 调用input.valueOf(),如果结果是原始类型,则返回该结果
  3. 调用input.toString(),如果结果是原始类型,则返回该结果
  4. 抛出typeerror错误

如果preferredType是string,那么第2步和第3步顺序反过来。

如果preferredType没有传入的话:

  • 如果input是Date类型,则preferredType取string
  • 否则,preferredType取number


Object.is


这个方法大致和===一样,除了以下:

  1. Object.is(NaN, NaN) 返回true
  2. Object.is(+0, -0) 返回false

参考

知乎-Javascript 中 == 和 === 区别是什么?

全面解析js中的数据类型与类型转换

ECMA规范



相关文章
|
2天前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
23小时前
|
移动开发 前端开发 JavaScript
前端高效开发JavaScript库!
前端高效开发JavaScript库!
|
2天前
|
前端开发 JavaScript 搜索推荐
前端网页手册(2)--菜鸟教程网站分析
前端网页手册(2)--菜鸟教程网站分析
9 2
|
2天前
|
前端开发 JavaScript 关系型数据库
前端网页手册(1)--基础学习
前端网页手册(1)--基础学习
5 1
|
2天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
2天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
2天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
2天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
2天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
2天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
28 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)