面试经典题:Object.is 和 == 以及 === 的区别

前言

在 JavaScript 中,比较操作符是编写代码时经常使用的基本功能之一。本文将详细介绍 Object.is===== 之间的区别。

1. Object.is

Object.isECMAScript 6 中引入的一种比较方法,它旨在提供一种更严格的比较方式,以解决 JavaScript 中一些奇怪的类型比较行为。

  • Object.is 通过检查两个值是否相等来进行比较。

  • 它遵循与 === 相同的行为,但有两个不同之处:

如以下例子

js 复制代码
Object.is(NaN, NaN); // true
NaN === NaN;         // false

Object.is(-0, +0); // false 
-0 === +0; // true

2. ==

== 是 JavaScript 中的相等比较操作符之一,它用于比较两个值是否相等。但是,它在进行比较时会进行类型转换。

  • 如果两个操作数具有相同的类型,则执行严格相等比较 (===)。
  • 如果操作数具有不同的类型,则尝试将它们转换为相同的类型,然后进行比较。
js 复制代码
0 == '';         // true,因为 '' 被转换为 0
1 == true;       // true,因为 true 被转换为 1

转换规则

  1. 首先判断两者的类型是否相同,如果相同,则会比较值的不同
  2. 如果两者类型不同,则会做类型转换,首先比较是否是null和undefined,如果是,则返回true
js 复制代码
null == undefind // true
null == null // true
undefind == undefind // true
  1. 如果不是则会判断两者是否为字符串或者数字,如果是则将字符串转换为数字
js 复制代码
1 == '1'(后面的1会转换为数字1)
Number('') => 0 
  1. 如果不是字符串或者数字,则会判断是否为boolean,如果是boolean,则将boolean转换为数字判断
js 复制代码
true == '1' // true
步骤详解
1、Number(true) ==> 1, 此时比较式变为 1 == '1',符合第三条规则,将字符串变为数字
2、Number('1') ===> 1, 此时比较式变为 1 == 1
  1. 如果是Object,则会将Object转换为基本类型,去进行比较
js 复制代码
[] === 0
1. 首先调用数组的valueOf方法
[].valueOf() ==> []
2. 调用数组的toString()
[].toString() ==> ""
3. 此时等式变为 "" == 0,符合第三条
4. Number("") ==> 0, 此时等式变为0==0

3. ===

=== 是 JavaScript 中的严格相等比较操作符,它不会进行类型转换。

  • 只有在两个操作数具有相同的类型且值相等时,=== 才返回 true
  • 否则,它返回 false
js 复制代码
0 === '';       // false,因为类型不同
1 === true;     // false,因为类型不同

总结

  • Object.is 提供了一种更严格的相等比较方法,解决了 === 无法正确处理 NaN-0/+0 的问题。
  • == 进行比较时会进行类型转换,可能会导致一些意想不到的结果。
  • === 是一种更可靠的比较方式,不会进行类型转换。
相关推荐
绝无仅有5 分钟前
大厂面试题MySQL解析:MVCC、Redolog、Undolog与Binlog的区别
后端·面试·架构
绝无仅有6 分钟前
MySQL面试题解析:MySQL读写分离与主从同步
后端·面试·架构
MegatronKing7 分钟前
一个有意思的问题引起了我的反思
前端·后端·测试
鹤归时起雾.19 分钟前
CSS属性继承与元素隐藏全解析
前端·css
火星数据-Tina25 分钟前
让电竞数据实时跳动:Spring Boot 后端 + Vue 前端的完美融合实践
前端·vue.js·spring boot
fruge36 分钟前
前端可视化家庭账单:用 ECharts 实现支出统计与趋势分析
前端·javascript·echarts
IT_陈寒1 小时前
Vue3性能优化实战:5个被低估的Composition API技巧让你的应用快30%
前端·人工智能·后端
嘻嘻哈哈猿人1 小时前
从 0 到 1 实现一个支持 @ 提及用户的输入框组件(Vue3 实战)
前端·vue.js
东土也1 小时前
Vue 项目 Nginx 部署路径差异分析与部署指南
前端
云枫晖1 小时前
Vue3 响应式原理:手写实现 ref 函数
前端·vue.js