JavaScript严格相等运算符 ===殊途同归？

你对JavaScript ===了解多少？我们将涵盖所有你需要了解的关于JavaScript严格相等的知识，包括示例，陷阱等等

在这篇文章中，我将探索JavaScript === 运算符，也被称为严格相等。

无论您是刚入门编程还是JavaScript专家，您对JavaScript === 有多了解呢？

继续阅读以找出答案！我将涵盖JavaScript === 运算符的含义，如何使用它，需要注意的常见问题，以及当然和它的表兄弟松散相等的区别。

作为十多年来最受欢迎的编程语言，JavaScript 在Web开发中继续占据主导地位。

而且，当您考虑到劳动统计局报告的平均工资超过85K美元，了解JavaScript === 的深入情况是非常有利可图的！

所以，如果您准备好了，让我们深入了解并学习JavaScript === 运算符！

JavaScript三个等号是什么？

好的，我要假设您已经对一些基本的JavaScript有一定了解。如果这听起来不错，那我们就从JavaScript === 的基础开始。

JavaScript === 运算符被称为严格相等运算符，它是在您的JavaScript项目中比较值的基本工具。

现在，与常见的双等号 == 不同，我们称之为松散相等运算符，三个等号不执行类型转换。

希望我没有把你弄糊涂！快速提一下，类型转换是值从一种数据类型自动或隐式转换为另一种数据类型。在任何一本好的JS书籍中，您应该会在早期看到这个提到。

想象一下在不同类型之间执行操作时，将字符串转换为数字。

所以，正如我所说，JavaScript === 不会执行此操作，这意味着它同时比较值和类型。

如果两者都相同，它返回一个true值，否则我们得到一个false结果。

与松散相等相比，这对于获得更精确和可靠的等式检查非常理想。

所以主要内容是当我们使用 === 时，JavaScript 比较两个值以确定它们是否具有相同的类型和值，返回的值是布尔类型。

如果您参加任何一门好的JavaScript课程，您将会经常看到使用严格相等运算符。

例如，如果我比较一个数字和一个字符串，===会认为它们不相等，即使字符串包含与数字相匹配的数值。

了解这种行为对编写清晰和无误的代码至关重要，因为它可以帮助您和我避免JavaScript自动转换类型时可能发生的微妙错误。

这是一个不那么微妙的暗示，当您使用JavaScript双等号时，这种情况更常见。

如果您打算获得专业的JavaScript认证，了解此类细节也非常有帮助。

总的来说，严格相等运算符是编写健壮和可预测的JavaScript代码的重要组成部分。

使用 === ，我们可以确保比较是彻底和准确的，使我们的代码在长期运行中更加可靠和可维护。赢了！

如何使用JavaScript ===

现在我们知道了严格相等运算符是什么，让我们看一下如何在JavaScript中使用 === 进行精确的比较。

确保将这些技巧添加到您的个人JavaScript 速查表中！

为了开始，我将从一些简单的用例开始，在其中使用基本的 === 语法为两个变量创建比较运算符。

所以，让我们启动我们的JavaScript IDE并开始编码吧！

请注意，我创建了一个数字和字符串变量，它们具有相同的值，以显示严格相等运算符如何处理这些情况。

目标很简单：如果类型和值是相同的，运算符返回 true，否则返回 false，因为我们有不同类型或值的操作数。

/*CodesCode.io：JavaScript ===基本用法*/let num = 5;let str = "5";console.log(num === 5); // true，值和类型相同console.log(str === "5"); // true，值和类型相同console.log(num === str); // false，不同类型

你应该看到当你比较不同数据类型时，=== 总是返回 false 的布尔结果。

现在，让我们深入一些需要类型精确度的条件语句中。

你对这些结果有什么预期吗？特别是当比较 null 和 undefined 时，你是否预期看到那个结果？

如果你来自其它语言，你可能会认为 null 和 undefined 值本质上是相同的，但正如你所见，这并不完全正确。

如果你习惯将它们都等同于 NaN 值，那么了解这一点是很重要的。

/*CodesCode.io：JavaScript ===比较*/console.log('5' === 5); // false，字符串和数字console.log(true === 1); // false，布尔值和数字console.log(null === undefined); // false，null 和 undefined

JavaScript === 另一个绝佳应用场景是在处理数组和对象时。

这些是 JavaScript 中非常常见的数据类型，那么我们来看看 === 如何对比它们。

提示：这完全是关于引用相等性，而不是对象或数组的内容。

/*CodesCode.io：JavaScript ===数组*/let array1 = [1, 2, 3];let array2 = [1, 2, 3];let array3 = array1;console.log(array1 === array2); // false，不同的引用console.log(array1 === array3); // true，相同的引用

在上面的例子中，你可以看到虽然 array1 和 array2 的内容相等，但它们不是同一个数组。这是因为它们占用不同的内存引用。

因此，我们看到的是一个 false 值。另一方面，当我们创建 array3 时，我们将其赋值为等于 array1，这就是为什么 JavaScript === 对于该比较返回 true 的原因。

你可能已经猜到了，这些原则同样适用于对象，如下所示。

/*CodesCode.io：JavaScript ===对象*/let obj1 = { name: "Alice" };let obj2 = { name: "Alice" };let obj3 = obj1;console.log(obj1 === obj2); // false，不同的对象console.log(obj1 === obj3); // true，相同的对象

为了圆满地结束，我们来探讨一下如何在条件语句中使用严格相等性。

再次记住，我们正在检查值和类型是否匹配。

因此，当我们将字符串变量与数字进行比较时，JavaScript === 返回 false，我们进入 else 代码块。

所以即使 age 的值在数值上等于 18，但类型不同（字符串 vs. 数字），这就是条件求值为 false 的原因。

我们还可以将这个思想扩展到包含逻辑运算符的更复杂条件语句中。

/*CodesCode.io：JavaScript ===条件语句*/let age = "18";if (age === 18) {  console.log("允许访问。");} else {  console.log("访问被拒绝。"); // 这将被执行}

太棒了！我们现在已经学会了如何在一些常见的场景中使用 JavaScript ===，做得好！

你需要记住的关键点是 JavaScript === 不仅是用来比较值，它还确保了所比较类型的完整性。

在这个阶段，我们来考虑为什么在我们的 JavaScript 代码中要使用 === 而不是 ==，以及反之。

为什么我们使用 === 而不是 ==？

了解如何使用 JavaScript 的严格相等（===）和松散相等（==）运算符对于编写精确、无错误的代码是基本的。

这也是一个常见的 JavaScript 面试问题！

也就是说，你可能会想知道为什么 JavaScript 有严格相等和松散相等？它们之间的主要区别是什么？为什么你会用其中之一而不是另一个？

很好的问题！那么，让我们从它们最显著的区别开始看起，正如我之前已经提到的，它们在处理类型转换方面的方式是不同的：

严格相等（===）会同时检查值和类型。如果类型不同，它会返回false。它不执行类型转换。
宽松相等（==）会比较值，在进行比较之前，会通过类型转换将操作数转为相同的类型。

好的，这听起来不错，但是我认为通过一个简单的代码示例来说明区别总是很有帮助。

/*CodesCode.io: JavaScript ===.Strict Equality vs Loose Equality*/let num = 5;let str = "5";console.log(num === str); // false，因为类型不同（数字 versus 字符串）console.log(num == str);  // true，因为类型转换后的值 '5' 相同

在这个例子中，三个等号的操作符返回false，因为一个变量是数字，而另一个变量是字符串。

相反，双等号的操作符返回true，因为在比较之前，字符串 ‘5’ 被转换为数字。

但是，为什么要使用===而不是==呢？

嗯，我建议在需要更可预测和准确的比较时使用JavaScript ===，因为这样可以避免JavaScript类型转换的怪异之处。

相信我，这可能会导致一些非常难以发现的错误！

话虽如此，有时候使用==而不是===也是有道理的。

一个很好的例子是当你获取数据时，但是数字类型的值以字符串或数字的方式格式化不一致。

这个时候使用宽松相等和类型转换比严格的数字比较更合适。

同样地，你可能希望在变量为null或undefined而无需区分两者的情况下处理。

宽松相等对此非常理想，因为你不希望比较不同类型的值。

JavaScript === 的常见陷阱

如果你刚开始使用JavaScript，我认为了解一些在使用严格相等时可能遇到的常见陷阱会非常有帮助。

相信我，这些会导致一些严重的困惑，特别是如果你习惯使用宽松相等的话！

陷阱＃1：比较不同类型的值

我知道这听起来有点傻，但是将不同类型的值进行比较且期望结果为true是一种非常常见的错误。

但是，正如我们所知，这将始终返回false，因为JavaScript === 同样会检查类型相等性。

/*CodesCode.io: JavaScript === Common PitfallsComparing Different Types*/let num = 0;let str = "0";// 陷阱：期望两者相等console.log(num === str); // false，因为类型不同

陷阱＃2：比较对象和数组

当使用JavaScript三等号时，另一个常见的误解是期望 === 比较对象或数组的内容，而不是它们的引用。

记住，如果数组具有相同的内容也没有关系，如果使用 ===，它将检查内存引用是否相同。

这就是使用 === 而非 == 来比较数组和对象的关键区别。

/*CodesCode.io: JavaScript === Common PitfallsComparing Arrays*/let array1 = [1, 2, 3];let array2 = [1, 2, 3];// 陷阱：假设它检查内容相等console.log(array1 === array2); // false，引用不同

同样的规则也适用于对象。

/*CodesCode.io: JavaScript === Common PitfallsComparing Objects*/let obj1 = { name: 'Alice' };let obj2 = { name: 'Alice' };// 陷阱：假设它比较对象属性console.log(obj1 === obj2); // false，不同的对象实例

陷阱＃3：错误理解 null 和 undefined 的比较

这是一个微妙但有影响力的陷阱，会让初学者措手不及。你必须记住的是，尽管 null 和 undefined 是宽松相等（==），但它们并不是严格相等。

/*CodesCode.io: JavaScript === Common PitfallsNull and Undefined Comparisons*/// 陷阱：期望 null 和 undefined 严格相等console.log(null === undefined); // false

性能考虑

我曾花了一些时间讨论何时以及为什么会使用JavaScript === 而不是 ==，但从性能的角度来看这也是有帮助的。

在大规模应用中，这可能尤为重要，因为众所周知，当涉及到 Big-O性能时，性能如何随大小而扩展十分关键。

因此，当我们使用JavaScript严格等号运算符===时，我们通常可以期望这比松散等号运算符要更快一些。

这是因为它在比较值和类型时不尝试进行类型转换，从而引入了额外的开销。

结果就是，当我们使用JavaScript === 时，JavaScript引擎不会在类型强制转换上花费额外资源，进而导致更快的评估。

在紧密循环或高频函数调用中，这一点尤为明显。

考虑下面这个在循环环境中的例子。

/*CodesCode.io: JavaScript ===Performance Considerations*/for (let i = 0; i < largeArray.length; i++) {  if (largeArray[i] === targetValue) {      // 执行操作  }}

在这个简单的场景中，通过使用 ===，我确保了每次迭代的直接比较，避免了在使用 == 时可能出现的类型转换开销。

如果迭代次数很小，性能提升可能微不足道，但在处理大型数据集或性能至关重要的应用程序时，这会非常有用。

也就是说，在日常编码场景中，性能差异大多是微不足道的！

对我来说，选择使用 === 还是 == 的主要原因应该主要受到对类型转换的需求和所进行比较的特定要素的指导。

在大多数情况下，使用 === 的更清晰、更可预测的代码优点超过了它的性能优势，但性能优点也是一个不错的附加好处！