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



相关文章
|
6月前
|
JavaScript 前端开发 API
|
6月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
229 8
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5932 24
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
205 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
166 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
11月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
371 5
|
11月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
272 4
|
11月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
414 1
|
11月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
1078 2
|
11月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
260 4

热门文章

最新文章