JavaScript

JavaScript 中 == 和 === 比较运算符的区别

Posted by cl9000 on March 29, 2020

每天做一件自己害怕的事。——<埃莉诺·罗斯福>

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/javascript/comparison-operators-in-javascript/

这是JavaScript面试中经常被问到的问题。我们可以使用JavaScript中的两个比较操作符==和===来比较基本类型、数组和对象。这篇文章用很多例子来描述这两者之间的区别。

“==” 操作符

  • ==也被称为抽象比较运算符，它只比较操作数的内容而不比较类型。
  • ==尝试在比较之前将操作数转换为兼容类型。
  • 相同内容的字符串和数字是相等的。==在比较前将字符串转换为数字。
  • 0、false和空字符串""可比较且相等。
  • null和undefined是可比较且相等的。
  • 具有完全相同元素的两个数组并不相等，因为它们都指向内存中不同的对象。
  • 同样，两个具有完全相同属性的对象也不相等，因为它们都指向内存中的不同对象。

“===” 操作符

  • ===也被称为严格比较操作符，用于比较内容及其类型。
  • ===在比较和直接比较之前不会尝试将操作数转换为兼容的类型。与==相比，它有更好的性能
  • 当两个字符串具有相同的字符序列、相同的长度以及在相应位置上相同的字符时，它们是严格相等的。
  • 两个数字在数字上相等时是严格相等的(具有相同的数字值)。
  • NaN不等于任何东西，包括NaN。
  • 正零(+0)和负零(-0)是严格相等的。在JavaScript中令人困惑，因为内容是不同的。
  • 两个布尔值只有当都是true或false时才严格相等。
  • 只有当两个对象指向同一个对象时，它们才严格相等。
  • null只严格等于null
  • undefined只严格等于undefined

比较 “==” 和 “===”

看下面输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
console.log("cnc" == "cnc");     // true, same content and type
console.log("cnc" === "cnc");    // true, same content and type

console.log(12345 == 12345);     // true, same content and type
console.log(12345 === 12345);     // true, same content and type

console.log(false == false);     // true, same content and type
console.log(false === false);    // true, same content and type
 
console.log(12345 == "12345");   // true, comparable and equal
console.log(12345 === "12345");  // false, different type

console.log(0 == false);         // true, comparable and equal
console.log(0 === false);        // false, different type

console.log("" == false);        // true, comparable and equal
console.log("" === false);       // false, different type

console.log(null == undefined);  // true, comparable and equal
console.log(null === undefined); // false, different type

console.log([] == []);           // false, both refers to different object in memory
console.log([] === []);          // false, both refers to different object in memory

console.log([1, 2] == [1, 2]);   // false, both refers to different object in memory
console.log([1, 2] === [1, 2]);  // false, both refers to different object in memory

console.log({} == {});           // false, both refers to different object in memory
console.log({} === {});          // false, both refers to different object in memory

var array1 = [1, 2, 3, 4, 5];
var array2 = array1;
console.log(array1 == array2);   // true, both refers to same array
console.log(array1 === array2);  // true, both refers to same array

var obj1 = { app : "cnc"};
var obj2 = obj1;
console.log(obj1 == obj2);       // true, both refers to same object
console.log(obj1 === obj2);      // true, both refers to same object

console.log(+0 == -0);           // true, confusing, content is different
console.log(+0 === -0);          // true, confusing, content is different

console.log(NaN == NaN);         // false, confusing, content and type is same
console.log(NaN === NaN);        // false, confusing, content and type is same

最后两个比较在JavaScript中非常令人困惑，请永远记住

  • NaN不等于NaN
  • +0等于-0
    还要记住，在可能的情况下，建议使用===进行比较，因为在性能方面，它比==快。

Object.is()

ES6引入了一个新的方法Object.is()来比较两个值，我们来看一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
console.log(Object.is("cnc", "cnc"));     // true, same content and type
console.log(Object.is(12345, 12345));     // true, same content and type
console.log(Object.is(false, false));     // true, same content and type

console.log(Object.is(12345, "12345"));   // false, different type
console.log(Object.is(0, false));         // false, different type
console.log(Object.is("", false));        // false, different type
console.log(Object.is(null, undefined));  // false, different type

console.log(Object.is([], []));           // false, both refers to different object in memory
console.log(Object.is([1, 2], [1, 2]));   // false, both refers to different object in memory
console.log(Object.is({}, {}));           // false, both refers to different object in memory

var array1 = [1, 2, 3, 4, 5];
var array2 = array1;
console.log(Object.is(array1, array2));   // true, both refers to same array

var obj1 = { app : "cnc"};
var obj2 = obj1;
console.log(Object.is(obj1, obj2));       // true, both refers to same object

console.log(Object.is(+0, -0));           // false, es6 is good, different content
console.log(Object.is(NaN, NaN));         // true, es6 is good, same content and type

可以看到Object.is()使NaN和+0/-0比较不那么容易混淆。

总结 Summary

其中==只比较内容，===同时比较操作数的内容和类型。严格的比较运算符===不会试图将操作数转换为兼容的类型，而且与抽象的比较运算符==相比，它提供了更好的性能。

最后，ES6中引入的Object.is()的工作原理非常类似于严格的操作符===，也避免了NaN比较和+0/-0比较的混淆。建议使用Object.is()。

参考

关注【公众号】，了解更多。
关注【公众号】，了解更多。
关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript
FRIENDS