在 JavaScript 比较中应该使用哪个等号运算符（== vs ===）？

痛定思痛。 2024-03-31 16:51 83阅读 0赞

## 问题描述： ##

这个问题的答案是社区的努力。编辑现有答案以改进这篇文章。它目前不接受新的答案或交互。

我正在使用 JSLint 浏览 JavaScript，并且在执行比较 if 内的 idSele\_UNVEHtype.value.length == 0 之类的操作时，它返回了许多建议以将 ==（两个等号）替换为 ===（三个等号）陈述。

将 == 替换为 === 是否有性能优势？

由于存在许多比较运算符，因此欢迎任何性能改进。

如果不进行类型转换，是否会比 == 获得性能提升？

## 解决方案1: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

严格相等运算符 (=) 的行为与抽象相等运算符 () 相同，只是不进行类型转换，并且类型必须相同才能被视为相等。

参考：Javascript Tutorial: Comparison Operators

== 运算符将在进行任何必要的类型转换后比较相等性。 === 运算符将不进行转换，因此如果两个值的类型不同，=== 将简单地返回 false。两者都同样快。

引用 Douglas Crockford 的出色JavaScript: The Good Parts，

JavaScript 有两组相等运算符：=== 和 !，以及它们的邪恶双胞胎 == 和 !=。好的工作按您期望的方式工作。如果两个操作数的类型相同且值相同，则 === 产生真，! 产生假。当操作数是相同类型时，邪恶双胞胎会做正确的事情，但如果它们是不同类型，它们会尝试强制值。他们这样做的规则既复杂又难以忘怀。以下是一些有趣的案例： ‘’ == ‘0’ // false 0 == ‘’ // true 0 == ‘0’ // true false == ‘false’ // false false == ‘0’ // true false == undefined // false false == null // false null == undefined // true ’ \\t\\r\\n ’ == 0 // true

https://i.stack.imgur.com/yISob.png

缺乏传递性令人担忧。我的建议是永远不要使用邪恶的双胞胎。相反，请始终使用 === 和 !==。刚刚显示的所有比较都使用 === 运算符产生错误。

更新：

@Casebash 在评论和 @Phillipe Laybaert’s answer 中提出了一个很好的观点，涉及对象。对于对象，== 和 === 彼此一致（特殊情况除外）。

var a = [1,2,3];
    var b = [1,2,3];
    
    var c = {
         x: 1, y: 2 };
    var d = {
         x: 1, y: 2 };
    
    var e = "text";
    var f = "te" + "xt";
    
    a == b            // false
    a === b           // false
    
    c == d            // false
    c === d           // false
    
    e == f            // true
    e === f           // true

特殊情况是当您将一个原语与一个评估为相同原语的对象进行比较时，由于其 toString 或 valueOf 方法。例如，考虑将字符串原语与使用 String 构造函数创建的字符串对象进行比较。

"abc" == new String("abc")    // true
    "abc" === new String("abc")   // false

这里 == 运算符检查两个对象的值并返回 true，但 === 发现它们不是同一类型并返回 false。哪一个是正确的？这实际上取决于您要比较的内容。我的建议是完全绕过这个问题，只是不要使用 String 构造函数从字符串文字创建字符串对象。

参考 http://www.ecma-international.org/ecma-262/5.1/\#sec-11.9.3

`我还要指出 0 === -0 和 NaN !== NaN，这有时会让人感到困惑。如果要区分 ±0 并考虑 NaN 相等，请使用 Object.is (ES2015)`

`软打字是一项功能。显然 Crockford 指出了设计决策的一些“人工制品”，但软打字仍然是一个特性。如果使用得当，绝对没问题。不要把婴儿和洗澡水一起扔掉。`

`为什么需要使用 -0？`

`@AdrianLarson 这是 IEEE-754 浮点的一个怪癖。它没有实际用途，但因为 IEEE-754 “double”是 "signed magnitude" 格式，负零“存在”。但是，为避免意外，它被定义为等于正零。 JavaScript（嗯，ECMAScript）defines (-0).toString() as "0"，但并非所有语言都这样做（例如，在 C# 中，Math.Round(-0.1).ToString() 是 "-0"）。这可能会导致像 x == 0 ? 0 : x 这样的奇怪修复。`

## 解决方案2: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

使用 == 运算符 (Equality)

true == 1; //true, because 'true' is converted to 1 and then compared
    "2" == 2;  //true, because "2" is converted to 2 and then compared

使用 === 运算符 (Identity)

true === 1; //false
    "2" === 2;  //false

这是因为等式运算符 == 确实类型强制，这意味着解释器会在比较之前隐式尝试转换值。

另一方面，身份运算符 === 不进行类型强制，因此在比较时不转换值。

`我不认为 identity 在这里是正确的术语/=== 检查相等性和类型（称为 strict）。 Idendity 通常指的是“相同性”，由 Object.is 函数提供（根据 ES2015）。`

## 解决方案3: ##

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

这是 == 和 === 之间相等比较的有趣可视化。

来源：https://github.com/dorey/JavaScript-Equality-Table（demo、unified demo）

var1 === var2

使用 === 进行 JavaScript 相等性测试时，一切都保持原样。在评估之前没有任何内容被转换。

https://i.stack.imgur.com/62vxI.png

var1 == var2

使用 == 进行 JavaScript 相等性测试时，会发生一些时髦的转换。

https://i.stack.imgur.com/35MpY.png

Javascript中的相等总结

https://i.stack.imgur.com/FX7z1.png

结论：

始终使用 ===，除非您完全理解与 == 发生的funky conversions。

`更好的“==”表：algassert.com/visualization/2014/03/27/…`

`至少 == 比较是可交换的（即 (a==b) === (b==a)）XD`

`@imkzh 关系通常被称为 对称 而不是 commutative。但我实际上来这里要说的是：== 不是传递的！ （即使忽略 NaN）`

`@Feuermurmel：您能举例说明 == 何时是非传递性的吗？`

`哦，抱歉回复晚了。 @SNag 绝对。取 a = []、b = false 和 c = [0]。`

## 解决方案4: ##

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

在这里的答案中，我没有阅读任何关于 equal 含义的内容。有人会说 === 表示相等且属于同一类型，但事实并非如此。这实际上意味着两个操作数都引用同一个对象，或者在值类型的情况下，具有相同的值。

因此，让我们采用以下代码：

var a = [1,2,3];
    var b = [1,2,3];
    var c = a;
    
    var ab_eq = (a === b); // false (even though a and b are the same type)
    var ac_eq = (a === c); // true

和这里一样：

var a = {
         x: 1, y: 2 };
    var b = {
         x: 1, y: 2 };
    var c = a;
    
    var ab_eq = (a === b); // false (even though a and b are the same type)
    var ac_eq = (a === c); // true

甚至：

var a = {
         };
    var b = {
         };
    var c = a;
    
    var ab_eq = (a === b); // false (even though a and b are the same type)
    var ac_eq = (a === c); // true

这种行为并不总是很明显。这个故事不仅仅是平等和同一类型。

规则是：

对于值类型（数字）：如果 a 和 b 具有相同的值并且属于相同的类型，则 a === b 返回 true

对于引用类型：如果 a 和 b 引用完全相同的对象，则 a === b 返回 true

对于字符串：如果 a 和 b 都是字符串并且包含完全相同的字符，则 a === b 返回 true

字符串：特殊情况…

字符串不是值类型，但在 Javascript 中它们的行为类似于值类型，因此当字符串中的字符相同且长度相同时，它们将“相等”（如第三条规则中所述）

现在变得有趣了：

var a = "12" + "3";
    var b = "123";
    
    alert(a === b); // returns true, because strings behave like value types

但是这个怎么样？：

var a = new String("123");
    var b = "123";
    
    alert(a === b); // returns false !! (but they are equal and of the same type)

我认为字符串的行为类似于值类型？好吧，这取决于你问谁…在这种情况下，a 和 b 不是同一类型。 a 属于 Object 类型，而 b 属于 string 类型。请记住，使用 String 构造函数创建字符串对象会创建 Object 类型的东西，大部分时间都表现为字符串。

## 解决方案5: ##

> huntsbot.com精选全球7大洲远程工作机会，涵盖各领域，帮助想要远程工作的数字游民们能更精准、更高效的找到对方。

让我补充一下这个忠告：

如有疑问，请阅读 specification！

ECMA-262 是一种脚本语言规范，JavaScript 是其方言。当然，在实践中，最重要的浏览器的行为方式比对应该如何处理某事的深奥定义更重要。但有助于理解为什么 new String(“a”) !== “a”。

请让我解释如何阅读规范以澄清这个问题。我看到在这个非常古老的话题中，没有人对非常奇怪的效果有答案。因此，如果您能阅读规范，这将对您的职业有极大的帮助。这是一种后天习得的技能。所以，让我们继续。

在 PDF 文件中搜索 === 会将我带到规范的第 56 页：11.9.4。严格的等于运算符（ === ），在涉足规范之后，我发现：

11.9.6 严格等式比较算法 比较 x === y，其中 x 和 y 是值，产生真或假。这种比较的执行如下： 1. 如果 Type(x) 与 Type(y) 不同，则返回 false。 2. 如果 Type(x) 未定义，则返回 true。 3. 如果 Type(x) 为 Null，则返回 true。 4. 如果 Type(x) 不是 Number，转到步骤 11。 5. 如果 x 是 NaN，则返回 false。 6. 如果 y 是 NaN，则返回 false。 7. 如果 x 和 y 的数值相同，则返回 true。 8. 如果 x 为 +0 且 y 为 -0，则返回 true。 9. 如果 x 为 -0 且 y 为 +0，则返回 true。 10. 返回错误。 11.如果Type(x)是String，那么如果x和y是完全相同的字符序列（长度相同，对应位置的字符相同），则返回true；否则，返回假。 12. 如果 Type(x) 是 Boolean，如果 x 和 y 都为真或都为假，则返回真；否则，返回假。 13. 如果 x 和 y 指代同一个对象或如果它们指代彼此连接的对象，则返回真（见 13.1.2）。否则，返回假。

有趣的是第 11 步。是的，字符串被视为值类型。但这并不能解释为什么 new String(“a”) !== “a”。我们是否有不符合 ECMA-262 的浏览器？

没那么快！

让我们检查操作数的类型。通过将它们包装在 typeof() 中自己尝试一下。我发现 new String(“a”) 是一个对象，使用第 1 步：如果类型不同则返回 false。

如果您想知道为什么 new String(“a”) 不返回字符串，那么来做一些阅读规范的练习怎么样？玩得开心！

Aidiakapi 在下面的评论中写道：

来自规范 11.2.2 The new Operator：如果 Type(constructor) 不是 Object，则抛出 TypeError 异常。换句话说，如果 String 不是 Object 类型，它就不能与 new 运算符一起使用。

new 总是返回一个 Object，即使对于 String 构造函数也是如此。唉！字符串的值语义（参见步骤 11）丢失。

这最终意味着：new String(“a”) !== “a”。

## 解决方案6: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

我在 Firefox 中使用 Firebug 使用如下代码对此进行了测试：

console.time(“testEquality”);变量 n = 0; while (true) \{ n++;如果（n == 100000）中断； \} console.timeEnd(“testEquality”);

和

console.time(“testTypeEquality”);变量 n = 0; while (true) \{ n++;如果（n === 100000）中断； \} console.timeEnd(“testTypeEquality”);

我的结果（每次测试五次并取平均值）：

==: 115.2
    ===: 114.4

所以我想说微小的差异（这是超过 100000 次迭代，记住）可以忽略不计。性能不是做===的理由。类型安全（好吧，就像你将在 JavaScript 中获得的一样安全），代码质量也是如此。

`现在，当 == 运算符存在实际类型强制时，它们如何比较？请记住，那是性能提升的时候。`

`正确测试时的主要区别是上述原因更快地只检查类型不等式。 jsfiddle.net/4jhuxkb2`

`我认为我们看到的时间差异是因为 n 是一个数字，所以是 100000，你应该在字符串“1”上检查它，我假设会发生一些解析并且时间差异会提高`

## 解决方案7: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

在 PHP 和 JavaScript 中，它是一个严格的相等运算符。这意味着，它将比较类型和值。

## 解决方案8: ##

> huntsbot.com精选全球7大洲远程工作机会，涵盖各领域，帮助想要远程工作的数字游民们能更精准、更高效的找到对方。

在 JavaScript 中，它意味着相同的值和类型。

例如，

4 == "4" // will return true

但

4 === "4" // will return false

## 解决方案9: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

为什么 == 如此难以预测？

当您将空字符串 “” 与数字零 0 进行比较时，您会得到什么？

true

是的，根据 == 是正确的，一个空字符串和数字零是相同的时间。

它并没有就此结束，这是另一个：

'0' == false // true

数组的事情变得非常奇怪。

[1] == true // true
    [] == false // true
    [[]] == false // true
    [0] == false // true

然后用字符串更奇怪

[1,2,3] == '1,2,3' // true - REALLY?!
    '\r\n\t' == 0 // true - Come on!

情况变得更糟：

什么时候相等不相等？

let A = ''  // empty string
    let B = 0   // zero
    let C = '0' // zero string
    
    A == B // true - ok... 
    B == C // true - so far so good...
    A == C // **FALSE** - Plot twist!

让我再说一遍：

(A == B) && (B == C) // true
    (A == C) // **FALSE**

这只是你用原语得到的疯狂的东西。

当您将 == 与对象一起使用时，这是一个全新的疯狂水平。

在这一点上，您可能想知道…

为什么会这样？

嗯，这是因为与“三等号”（===）不同，它只检查两个值是否相同。

== 做了一大堆其他事情。

它对函数有特殊处理，对空值、未定义、字符串有特殊处理，你可以命名它。

它变得很古怪。

实际上，如果您尝试编写一个执行 == 的函数，它看起来像这样：

那么这是什么意思？

这意味着 == 很复杂。

因为它很复杂，所以很难知道使用它时会发生什么。

这意味着您最终可能会遇到错误。

所以这个故事的寓意是……

让你的生活不那么复杂。

使用 === 而不是 ==。

结束。

## 解决方案10: ##

> 与HuntsBot一起，探索全球自由职业机会–huntsbot.com

=== 运算符称为严格比较运算符，它确实不同于 == 运算符。

让我们取 2 个变量 a 和 b。

要使“a == b”评估为真，a 和 b 必须是相同的值。

在“a === b”的情况下，a 和 b 必须是相同的值和相同的类型才能评估为真。

举个例子

var a = 1;
    var b = "1";
    
    if (a == b) //evaluates to true as a and b are both 1
    {
        
        alert("a == b");
    }
    
    if (a === b) //evaluates to false as a is not the same type as b
    {
        
        alert("a === b");
    }

总之;在您不希望使用 == 运算符的情况下，使用 == 运算符可能会评估为 true，因此使用 === 运算符会更安全。

在 90% 的使用场景中，你使用哪一个并不重要，但是当你有一天遇到一些意想不到的行为时，很容易知道其中的区别。

## 解决方案11: ##

> huntsbot.com – 高效赚钱，自由工作

=== 检查相同的边在类型和值上是否相等。

例子：

'1' === 1 // will return "false" because `string` is not a `number`

常见示例：

0 == ''  // will be "true", but it's very common to want this check to be "false"

另一个常见的例子：

null == undefined // returns "true", but in most cases a distinction is necessary

很多时候，untyped 检查会很方便，因为您不在乎值是 undefined、null、0 还是 “”