【前端工程师手册】说清楚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导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
129 0
|
4天前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
11天前
|
存储 JavaScript 前端开发
后端程序员的前端基础-前端三剑客之JavaScript
后端程序员的前端基础-前端三剑客之JavaScript
13 4
|
10天前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
16天前
|
前端开发 JavaScript
前端必会的JavaScript模块化
【8月更文挑战第3天】JavaScript模块化
16 1
|
4天前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
4天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
2月前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
43 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
1月前
|
SQL 前端开发 JavaScript
前端三剑客之JavaScript基础入门
前端三剑客之JavaScript基础入门
|
2月前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
21 1