不要再到处使用===了

我们知道现在的开发人员都使用 &＃61;&＃61;&＃61; 来代替 &＃61;&＃61;&＃xff0c;为什么呢&＃xff1f;

我在网上看到的大多数教程都认为&＃xff0c;要预测 Javascript 强制转换是如何工作这太复杂了&＃xff0c;因此建议总是使用&＃61;&＃61;&＃61;。

这些都导致许多程序员将该语言的一部分排除在外&＃xff0c;并将其视为一种缺陷&＃xff0c;而不是去扩大他们的对该过程的理解。

下面通过两个使用案例&＃xff0c;说明使用 &＃61;&＃61; 的好处。

1.测试空值

if (x &＃61;&＃61; null)
vs
if (x &＃61;&＃61;&＃61; undefined || x &＃61;&＃61;&＃61; null)


2.读取用户的输入

let userInput &＃61; document.getElementById(&＃39;amount&＃39;);
let amount &＃61; 999;
if (amount &＃61;&＃61; userInput)
vs
if (amout &＃61;&＃61;&＃61; Number(userInput))


在本文中&＃xff0c;我们将通过对比差异&＃xff0c;理解强制性&＃xff0c;研究一些流行的用例&＃xff0c;并最终找到指导我们做出决定的准则&＃xff0c;来深入了解该主题。

简介

在Javascript中&＃xff0c;相等由两个运算符完成。

1. &＃61;&＃61;&＃61; —严格相等比较也称为三等运算符。

2. &＃61;&＃61; — 抽象的相等比较  

我一直在使用&＃61;&＃61;&＃61;&＃xff0c;因为我被告知它比&＃61;&＃61;更好和更好&＃xff0c;而且我根本不需要考虑它&＃xff0c;作为一个懒惰的人&＃xff0c;我觉得很方便。

直到我观看了Kyle或[&＃64;getfiy][1]的[You Do n&＃39;t Know JS][2]作者在Frontend Masters上的“ Deep Javascript Foundations”。

作为一名专业的程序员&＃xff0c;我没有深入思考我每天工作中使用的操作符&＃xff0c;这一事实激励我去传播意识&＃xff0c;并鼓励人们更多地理解和关注我们编写的代码。

事实的根源在哪里

知道真实的原因在哪里很重要。不是在 Mozilla 的 W3school 上&＃xff0c;也不在声称&＃61;&＃61;&＃61;优于&＃61;&＃61;的数百篇文章中&＃xff0c;而且在这篇文章中也绝对没有。。

在Javascript规范中&＃xff0c;我们可以找到关于Javascript如何工作的[文档][3]。

打破常识

1. &＃96;&＃61;&＃61;&＃96;只检查值(松散)

如果看一下规范&＃xff0c;从定义中可以很清楚地看出&＃xff0c;算法要做的第一件事实际上就是检查类型。

2. &＃96;&＃61;&＃61;&＃61;&＃96;检查值和类型&＃xff08;严格&＃xff09;

在这里&＃xff0c;我们同样可以从规范中看到&＃xff0c;它检查类型&＃xff0c;如果它们不同&＃xff0c;则不会再检查值。

双等号和三等号之间的真正区别是我们是否允许强制转换。

Javascript 中的强制转换

强制转换或类型转换是任何编程语言的基础之一。这对于动态类型化的语言&＃xff08;例如Javascript&＃xff09;尤为重要&＃xff0c;因为如果类型更改&＃xff0c;编译器不会对它大喊大叫&＃xff0c;找它麻烦。

理解强制性意味着我们能够以与Javascript相同的方式解释代码&＃xff0c;从而为我们提供了更大的可扩展性并最大程度地减少了错误。

显性强制转换

强制转换可以在程序员调用这些方法之一时显式发生&＃xff0c;从而强制改变变量的类型。

Boolean(), Number(), BigInt(), String(), Object()

事例&＃xff1a;

let x &＃61; &＃39;foo&＃39;;
typeof x // string
x &＃61; Boolean(&＃39;foo&＃39;)
typeof x // boolean


隐藏转换

在Javascript中&＃xff0c;变量的类型很弱&＃xff0c;因此这意味着它们可以自动转换&＃xff08;隐式强制&＃xff09;。当我们使用算术运算符&＃43; / — *&＃xff0c;周围的上下文或使用&＃61;&＃61;时&＃xff0c;通常是这种情况。

2 / &＃39;3&＃39; // &＃39;3&＃39; 强制转为  3
new Date() &＃43; 1 //  强制转换为以1结尾的日期字符串
if(x) // x 被强制为布尔值
1 &＃61;&＃61; true // true 被强制为 1
1 &＃61;&＃61; &＃39;true&＃39; // &＃39;true&＃39; 被强制为  NaN
&＃96;this ${variable} will be coreced to string


隐性强制是一把双刃剑&＃xff0c;合理使用可以增加可读性&＃xff0c;减少冗长。如果使用不当或被误解&＃xff0c;我们就会有一个让人失望的公式&＃xff0c;人们会咆哮并指责Javascript。

比较的算法

&＃61;&＃61; 运算符号的算法

1. 如果X和Y是相同的类型&＃xff0c;则执行&＃61;&＃61;&＃61;。

2. 如果X为null且Y未定义或反之&＃xff0c;则为true。

3. 如果一个是数字&＃xff0c;则将另一个强制为数字。

4. 如果一个是对象&＃xff0c;则强制转换为原始对象。

5. 其它&＃xff0c;返回 false。

&＃61;&＃61;&＃61; 比较的算法

1. 如果类型不匹配 false。

2. 如果类型匹配-比较值&＃xff0c;为 NaN 时返回false。

3. -0 — true.

流行的用例

1. 同类型(多数情况)

如果类型相同&＃xff0c;则&＃61;&＃61;&＃61;与&＃61;&＃61;完全相同。因此&＃xff0c;应该使用语义性更强的那个。

1 &＃61;&＃61; 1 // true                ......        1 &＃61;&＃61;&＃61; 1 // true
&＃39;foo&＃39; &＃61;&＃61; &＃39;foo&＃39; // true        ......       &＃39;foo&＃39; &＃61;&＃61;&＃61; &＃39;foo&＃39; //true


类型不同&＃xff0c;我更喜欢用 &＃61;&＃61;&＃61;。

2. 不同类型&＃xff08;原始类型&＃xff09;

首先&＃xff0c;我想提醒您注意&＃xff0c;不同类型并不意味着未知类型。不知道类型表明代码中的问题比仅使用 &＃61;&＃61;&＃61; vs&＃61;&＃61;更大。了解类型表明对代码有更深入的理解&＃xff0c;这会减少更多的错误。

假设我们有一个数字或字符串的可能性。请记住&＃xff0c;算法更偏向数字类型&＃xff0c;因此它将尝试使用toNumber()

let foo &＃61; 2;
let bar &＃61; 32; // number 还是 string
foo &＃61;&＃61; bar // 如果 bar 是字符串&＃xff0c;它会转换成 number
foo &＃61;&＃61;&＃61; Number(bar) // doing basically the same
foo &＃61;&＃61;&＃61; bar //  bar 为 string 则该结果为 false


3. null和undefined

使用&＃61;&＃61;时&＃xff0c;null和undefined彼此相等。

let foo &＃61; null
let bar &＃61; undefined; 
foo &＃61;&＃61; bar // true
foo &＃61;&＃61;&＃61; bar // false


4.非原始类型[对象&＃xff0c;数组]

不应该使用&＃61;&＃61;或&＃61;&＃61;&＃61;来比较对象和数组等非原始类型的数据。

决策准则

1. 在所有可以使用的情况下&＃xff0c;最好使用&＃61;&＃61;。

2. &＃61;&＃61;具有已知类型&＃xff0c;可以选择强制类型转换。

3. 知道类型总比不知道好。

4. 如果不知道类型&＃xff0c;就不要使用&＃61;&＃61;。

5. 当类型不匹配时&＃xff0c;&＃61;&＃61;&＃61; 是没有意义的。

6. 当类型匹配时&＃xff0c;&＃61;&＃61;&＃61;是不必要的。

避免使用 &＃61;&＃61; 情况

在某些情况下&＃xff0c;如果不真正了解Javascript中的虚值&＃xff0c;则不应使用&＃61;&＃61;。

&＃61;&＃61; with 0 or "" or "   "
&＃61;&＃61; with non primtives
&＃61;&＃61; true  or  &＃61;&＃61; false


总结

根据我的经验&＃xff0c;到目前为止&＃xff0c;我一直都知道我要处理的变量的类型&＃xff0c;如果我不知道&＃xff0c;我就使用typeof来只允许我所期望的变量。

需要注意的四点

1. 如果你不知道变量类型&＃xff0c;那么使用&＃61;&＃61;&＃61;是惟一合理的选择

2. 不知道类型可能意味着你不理解代码&＃xff0c;请尝试重构你的代码

3. 知道类型可以编写更好的代码。

4. 如果类型已知&＃xff0c;则最好使用&＃61;&＃61;。

作者&＃xff1a;Seifeldin Mahjoub 译者&＃xff1a;前端小智 来源&＃xff1a;domnung
原文&＃xff1a;https://domnung.com/article/618194/learning//2020-01-30/medium.com/&＃61;&＃61;&＃61;-Javascript-coercion-types-standing/stop-using-%3D%3D%3D-everywhere

交流

知道临时死区你才能更好的使用 JS 变量

【激发创意的小视频】5分钟带你学会创意产品卡设计

为什么 JS 中的对象字面量很酷

这 10 个片段&＃xff0c;有助于你理解 ES 中的 Promise

这5个 console.log() 技巧帮你提高工作效率