面试经典题: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 的问题。
  • == 进行比较时会进行类型转换,可能会导致一些意想不到的结果。
  • === 是一种更可靠的比较方式,不会进行类型转换。
相关推荐
太阳伞下的阿呆25 分钟前
本地环境vue与springboot联调
前端·vue.js·spring boot
无限大628 分钟前
只出现一次的数字:从暴力美学到位运算神技的进化之路
后端·面试
阳光是sunny37 分钟前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴2 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔2 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔2 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔2 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6142 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
程序员曦曦2 小时前
15:00开始面试,15:06就出来了,问的问题有点变态。。。
自动化测试·软件测试·功能测试·程序人生·面试·职场和发展
止观止3 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix