2019-06-07

三分钟带你玩转JS中的==与===

【原创】码路工人 Coder-Power

大家好，这里是码路工人有力量，我是码路工人，你们是力量。

相信很多童鞋在刚刚接触做web用到javascript时，会搞不太清楚 == 与 === 的具体区别及用法，今天就来总结一下，欢迎交流补充及谬误斧正。

0. 让我们在例子中观察一下

//eg.1 ==
console.log(1 == true)     // true
console.log(0 == false)    // true


//eg.2 ===
console.log(1 === true)    // false
console.log(0 === false)   // false
// false

思考以上eg.1中，如何做的隐式类型转换，让我们得到了上面两个true的结果呢。

1. 对于5种基本数据类型/简单类型

Number，string，Boolean，Null，Undefined
== 与 ===是有区别的

==
通过默认隐式转换，转为同一类型，在比较value是否相等
隐式转换中true->1,false->0
===
先比较类型，类型不同，则为false，类型相同再比较值。

2. 对于高级类型/复杂类型，`==` 与 `===`从结果上就看不出区别了。

// eg.3
//   分别进行简单类型与简单类型，复杂类型与复杂类型的比较

let a = 'str'
let b = 'str'
console.log(a == b)    // true
console.log(a === b)   // true
// 解释：a跟b的string值作为内存堆中的常量池，实际上指向的地址是相同的，===比较的是相同的地址，所以为true

let obj1 = {a}
let obj2 = {a}
let obj3 = {b}

console.log(obj1 == obj2)     // false
console.log(obj1 == obj3)     // false

console.log(obj1 === obj2)    // false
console.log(obj1 === obj3)    // false

// 每一个对象都是不同的对象，指向不同的地址

3. 当简单类型与复杂类型比较

也有这样的情况，比如比较 [] 与 ""

非严格相等（==）

// eg.4
console.log([] == "")    // true

// 原理：
// 复杂类型 [] 先转换为简单类型，
//   过程：先调用valueOf，再调用toString
[].valueOf()    // []对象
[].valueOf().toString() // ""
// 再与 "" 进行比较

严格相等（===）比较的时候由于不同类型，直接就是false了

4. 补充

4.1 简单地说

全等操作运算符===，比较两个值是否相等，是严格相等比较，会比较两个值的数据类型，如果两个值的数据类型不同，那么就是不全等的。也就是说不存在隐式的类型转换。
相等比较运算符==，两个不同简单类型的对象比较会有隐式转换。

4.2 默认的转换

以下会在判断条件中转换为 false
1
2
3
4
5
null
Nan
0
"" or ''
undefined
以下会在判断条件中转换为 true
1
2
非0（-1,1，2，3...等）
任何不为空的字符串或对象（如object，function，Array等）
注意了，
1
2
3
4
5
6
7
8
9
// eg.5
let n = -1
if(n){
console.log(`${n}被判为true了`)
}
else{
console.log(`${n}被判为false了`)
}
// -1被判为true了
在判断条件里，-1 是被当成true了，但是，-1又不==双等于true
1
console.log(n == true) // false
由此可以发现，js里的if运算符对于判断条件所得出的结果与单纯的相等比较是不同的，if运算符的范畴本处不再深入讨论，放在在后面单独说说逻辑与或运算符。

做一个到达过 New C 的人，至少可以说我曾经 New B 过 ^_-

算是第一篇正式的博文了，感觉很多东西没写明白，希望以后：1.坚持下去 2.做地更好。下次见。