【前端工程师手册】说清楚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规范



相关文章
|
28天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
43 5
|
28天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
69 1
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
37 4
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
53 4
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
194 0
|
3月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
49 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
3月前
|
Web App开发 JavaScript 前端开发
前端基础(一)_初识JavaScript
本文介绍了JavaScript的起源、核心组成(ECMAScript、DOM、BOM),并解释了JavaScript的三种引入方式:行内引入、内部引入和外部引入,以及`window.onload`的使用,最后讨论了网页、网站、浏览器和兼容性的概念。
19 2
前端基础(一)_初识JavaScript
|
3月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
116 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)