阅读 29

JS切勿一味地使用===

全文共3228字,预计学习时长10分钟

来源:Pexels


相比==,许多开发人员更喜欢使用===,为什么呢?


网上大多数教程都有解释过,JavaScript的强制转换太过复杂,难以预测,因此建议始终使用===。


互联网上一些教程的错误观念误导了大众,以及许多不成文的规则和受欢迎的网站都建议一直使用===。


这些都导致许多程序员放弃了一些程序语言,并将其视为缺陷,而不是深入理解领悟它们。


下面的两个案例说明了在哪些情况下最好使用==。


1. 测试空值


if (x ==null)vsif (x === undefined || x === null)复制代码

2. 读取用户的输入


let userInput = document.getElementById('amount');复制代码
let amount =999;复制代码
if (amount == userInput)复制代码
vs复制代码
if (amout ===Number(userInput))复制代码


本文将深入了解该主题,通过发现二者之间的差异,理解强制转换的概念,研究一些经典案例,并最终找到指导我们做出决定的准则。

引言


在Javascript脚本语言中,有两个运算符表示“相等”关系。


1、=== — 严格相等比较也称为三重相等比较。

2、==—抽象相等比较也称为双重相等比较。


我习惯于使用===,因为有人告诉我它比==更好用,更高级,且作为一个懒汉,我也没有特意去考证这一说法,我觉得使用===很方便。


直到我看了《你不懂JS》的作者凯尔(Kyle,@getfiy)在FrontendMasters上发表的《JavaScript 的深层基础》”,才发现我的想法大错特错。


作为一名专业的程序员,我并没有深入思考我每天工作中使用的操作符,这一惨痛事实促使我下定决心,广泛传播相关知识,使人们更多地理解和关注我们编写的代码。


真理的源泉


了解真相所在是很重要的。它不在Mozilla上,不在W3schools网站上,也不在那上百篇声称===比==更好用的文章中,而且在这篇文章中也没有。


真相在JavaScript的语言规范中,你可以在其中找到JavaScript运行模式的说明。


来源:Pexels


消除迷思


1. ==仅用来检测数值是否相等(定义较宽松)


在规范中,==有着明确定义,从中可以看出,进行算法之前,我们要做的第一件事实际上就是确认变量类型。


2. ===检查数值及变量类型(严格比较)


同样可以从规范中看到,===要求先检查变量类型,并且如果类型不同,则无需再比较数值。


==和===之间的真正区别是是否进行强制转换。


JavaScript中的强制转换


强制转换或类型转换是任何编程语言的基础之一。这对于JavaScript这样的动态类型的语言尤为重要,因为如果变量类型更改,编译器可不会提醒你。


理解强制类型转换之后,我们便能够以JavaScript之类的方式解释代码,这为我们提供了更大的操作空间,并最大程度地减少了错误。


显性强制转换


当程序员采用以下方法进行强制显性转换时,变量的类型便会更改。


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


举例:


let x ='foo';typeof x // stringx = Boolean('foo')typeof x // boolean复制代码

隐性强制转换


在JavaScript中,变量是弱类型,这意味着它们可以自动转换(隐式强制转换)。在使用加减乘除运算操作,执行上下文,或使用==时,通常会发生隐性强制转换。


2 / '3'// '3' coerced to 3复制代码
newDate() +1// coerced to a string of date that ends with 1复制代码
if(x) // x is coerced to boolean复制代码
1==true// true coerced to number 1复制代码
1=='true'// 'true' coreced to NaN复制代码
`this ${variable} will be coreced to string复制代码


隐性强制转换是一把双刃剑,明智地使用它可以增强可读性并减少冗余。如果误解其含义,或者操作失误,您的运算便会不尽人意,从而抱怨并指责JavaScript不好用。

相等算法简介


来源:Pexels


抽象相等比较==


1.如果X和Y属于同一类型,请执行===。

2.如果X为空而Y未定义,或者相反-为true。

3.如果一个是数字,则将另一个强制转换为数字。

4.如果一个是对象,则强制转换为原始对象。

5,返回false


严格相等比较===


1.如果类型不匹配-false。

2.如果类型匹配-比较值,如果不是数字(NaN),返回false。

3.-0-true。


经典案例


1.相同类型(大多数情况下)


如果类型相同,则===与==没有差别。因此,应该使用更具语义性的一种。


有人会说:“我更喜欢使用===,以防类型不同。”


但这种说法不合乎逻辑,就像按两次保存,却要刷新五次一样。我们不会为了以防万一,用同样的方法写两次代码,不是吗?


2.不同类型(原语)


首先,提请您注意类型不同并不意味着类型未知。


如果你对数据的类型一无所知,这表明在探讨使用=== 还是==之前,你应该先解决代码中的问题。


对数据类型有一定的了解,表明你对代码有更深入的认知,有助于减少失误,开发更为可靠的软件。


认清了数据类型之后,通过了解强制转换,我们可以选择是否进行强制转换,从而决定是使用===还是==。


假设有可能是数字或字符串。


请记住,该算法更适用于数字,因此应当选择to Number()。


let foo= 2;复制代码
let bar = 32; // number or stringfoo == bar // if bar is string it will becoreced to numberfoo === Number(bar) // doing basically the samefoo === bar //would always fail if bar comes as string复制代码

3. null(无效)和undefined(未定义)


使用==时,null和undefined无明显差别。


let foo= null复制代码
let bar = undefined; foo == bar // truefoo === bar // false复制代码


4.非原语[对象,数组]


不能使用==或===比较对象和数组等非原语。


决策准则


1,在所有可以使用的情况下都首选==

2。==可用于已知类型,可以选择强制类型转换。

3.尽可能地了解数据类型。

4.如果您不知道类型,请不要使用==。

5,如果知道类型,===和==均可

6。当类型不匹配时,===毫无意义。

7,当类型匹配时,没必要使用===。


以下情况请避免使用==


如果不真正了解JavaScript中的假值,在以下情况中就不应该使用==。


== with0 or "" or " "==with non primtives== true or == false复制代码


结论


来源:Pexels


根据我多年使用JavaScript的经验,到目前为止,我一直都很了解要处理的变量的类型,如果不了解,我会使用type of来选择期望的变量。


对于看到这里的读者,有四个要点是一定要注意的。


1.如果无从得知或无需了解类型,则使用===是不二选择。

2.对类型一无所知可能是因为不了解代码,请尝试重构代码。

3.了解了类型才能编写出更出色的代码。

4,如果类型已知,最好选择==,否则则使用===。


感谢阅读,希望本文能帮助您加深对JavaScript的理解。

留言 点赞 关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”


(添加小编微信:dxsxbb,加入读者圈,一起讨论最新鲜的人工智能科技哦~)