JavaScript双等号(==)与三等号(===)的区别举例详解

前言：

双等号与三等号区别，是近年面试的高频考点，但相信不少前端老兵都只知道大概的区别。别慌，希望看完本文章能让你掌握这个知识点。

一.等于操作符（==）

当使用双等号（==）进行比较时，JS首先会判断两个值类型是否相同。如果两个值类型相同，则直接进行比较；如果两个值类型不同，会先将比较的两个值转换为相同的类型，然后再进行比较（一般情况，下面会讲特殊情况）。

在类型转换过程中，JS遵循以下规则：

1.如果比较的两个值类型相同，则直接返回比较结果。 

console.log(1 == 1) //true

2.如果比较的两个值类型不同，则先将比较的两个值转换为相同的类型，然后再进行比较（一般情况，下面会讲特殊情况）。    

（1）如果一个值是数字，另一个值是字符串，JS会尝试将字符串转换为数字，然后再进行比较。

console.log(1 == "1") //true

（2）Boolean 和其他任何类型比较，Boolean 首先被转换为 Number 类型。

console.log(true == 1) //true
console.log(true == "1") //true

（3）两个值都是引用类型且类型相同，它们指向的是同一个内存地址的话，返回true。

console.log({} == {}) //false 虽然类型相同，但引用地址不同

const obj = {}
console.log(obj == obj) //true 引用地址相同

（4）如果一个值是引用类型，另一个值是原始类型，JS会尝试使用valueOf()或toString()方法将引用类型转换为原始类型的值，然后再进行比较。 

console.log("[object Object]" == {}) // true, 对象和字符串比较，没有自定义valueOf方法，对象通过 toString 得到一个基本类型值

const obj = {
  valueOf: function () {
    return 1
  },
}
console.log(obj == 1) // true 对象和字符串比较，有自定义valueOf方法,调用valueOf方法

console.log("1,2,3" == [1, 2, 3]) // true, 数组和字符串比较，没有自定义valueOf方法 数组通过 toString 得到一个基本类型值

3.在特殊情况下，如果比较的两个值的类型不同，不会进行类型转换，直接进行比较。

（1）null == undefined比较结果是true。null、undefined和其他任何结果的比较值都为false，但是null和null，undefined和undefined为true。

console.log(null == undefined) //true

console.log(null == null) //true
console.log(null == "") //false
console.log(null == 0) //false
console.log(null == false) //false

console.log(undefined== undefined) //true
console.log(undefined == "") //false
console.log(undefined == 0) //false
console.log(undefined == false) //false

（2）NaN和其他任何类型比较是false（包括和它自己） 

console.log(NaN == NaN) //false
console.log(NaN == undefined) //false

二.全等操作符（===）

1.如果比较的两个值类型不同，直接返回false。

console.log(1 === "1") //false

2.如果比较的两个值是数字，并且它们具有相同的值，返回true。

3.如果比较的两个值是字符串，并且它们具有相同的值，返回true。

4.如果比较的两个值是布尔值，并且它们具有相同的真值或假值，返回true。

5.如果比较的两个值是引用类型，它们指向的是同一个内存地址，返回true。

console.log({} === {}) //false 虽然类型，内容相同，但引用地址不同

const obj = {}
console.log(obj === obj) //true 引用地址相同

6.如果比较的两个值都是null或都是undefined，它们被视为相等的，返回true。

console.log(null === undefined) //false

console.log(null === null) //true
console.log(null === "") //false
console.log(null === 0) //false
console.log(null === false) //false

console.log(undefined=== undefined) //true
console.log(undefined === "") //false
console.log(undefined === 0) //false
console.log(undefined === false) //false

7.NaN和其他任何类型比较是false（包括和它自己）

console.log(NaN === NaN) //false
console.log(NaN === undefined) //false
console.log(NaN === 0) //false
console.log(NaN === null) //false
console.log(NaN === "") //false

三.区别：

1.双等号比较可能会进行类型转换，是宽松比较；而三等号不会进行类型转换，是严格比较

2.null和undefined的比较不同

双等号下null和undefined比较返回为true；而三等号下null和undefined比较返回为false

console.log(null == undefined) //true
console.log(null === undefined) //false

在实际开发中更推荐用三等号进行比较，能提高安全性，因为双等号比较可能会进行类型转换，可能会带来意外的结果。当然你能正确使用双等号的话，使用双等号也无所谓，能提高代码简洁性。（但是据我所知，蛮多喜欢用双等号的前端开发者多多少少容易出bug，小编之前帮一位同事改bug，发现几个bug都是由双等号引起的）

总结

到此这篇关于JavaScript双等号(==)与三等号(===)区别的文章就介绍到这了,更多相关js双等号和三等号区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论