JS不要再到处使用绝对等于运算符了


Posted in Javascript onApril 30, 2021

概述

我们知道现在的开发人员都使用===来代替==,为什么呢?

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

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

下面通过两个使用案例,说明使用==的好处。

1.测试空值

if (x == null)
vs
if (x === undefined || x === null)

2.读取用户的输入

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

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

简介

在JavaScript中,相等由两个运算符完成。

1.=== —严格相等比较也称为三等运算符。

2.== — 抽象的相等比较

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

直到我观看了Kyle或@getfiy的You Do n't Know JS作者在Frontend Masters上的“ Deep JavaScript Foundations”。

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

事实的根源在哪里

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

在JavaScript规范中,我们可以找到关于JavaScript如何工作的文档。

打破常识

1.==只检查值(松散)

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

JS不要再到处使用绝对等于运算符了

2.===检查值和类型(严格)

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

JS不要再到处使用绝对等于运算符了

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

JavaScript 中的强制转换

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

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

显性强制转换

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

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

事例:

let x = 'foo';
typeof x // string
x = Boolean('foo')
typeof x // boolean

隐藏转换

在JavaScript中,变量的类型很弱,因此这意味着它们可以自动转换(隐式强制)。 当我们使用算术运算符+ / — *,周围的上下文或使用==时,通常是这种情况。

2 / '3' // '3' 强制转为  3
new Date() + 1 //  强制转换为以1结尾的日期字符串
if(x) // x 被强制为布尔值
1 == true // true 被强制为 1
1 == 'true' // 'true' 被强制为  NaN
`this ${variable} will be coreced to string

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

比较的算法

== 运算符号的算法

1.如果X和Y是相同的类型,则执行===。

2.如果X为null且Y未定义或反之,则为true。

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

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

5.其它,返回false。

=== 比较的算法

1.如果类型不匹配false。

2.如果类型匹配-比较值,为NaN时返回false。

3.-0 — true.

流行的用例

1. 同类型(多数情况)

如果类型相同,则===与==完全相同。因此,应该使用语义性更强的那个。

1 == 1 // true                ......        1 === 1 // true
'foo' == 'foo' // true        ......       'foo' === 'foo' //true

类型不同,我更喜欢用===。

2. 不同类型(原始类型)

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

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

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

3. null和undefined

使用==时,null和undefined彼此相等。

let foo = null
let bar = undefined; 
foo == bar // true
foo === bar // false

4.非原始类型[对象,数组]

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

决策准则

1.在所有可以使用的情况下,最好使用==。

2.==具有已知类型,可以选择强制类型转换。

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

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

5.当类型不匹配时,===是没有意义的。

6.当类型匹配时,===是不必要的。

避免使用 == 情况

在某些情况下,如果不真正了解JavaScript中的虚值,则不应使用==。

== with 0 or "" or "   "
== with non primtives
== true  or  == false

总结

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

需要注意的四点

1.如果你不知道变量类型,那么使用===是惟一合理的选择

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

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

4.如果类型已知,则最好使用==。

以上就是JS不要再到处使用绝对等于运算符了的详细内容,更多关于JS的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
JSONP跨域请求
Mar 02 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
如何用Node.js编写内存效率高的应用程序
用几道面试题来看JavaScript执行机制
Apr 30 #Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 #Javascript
浅谈node.js中间件有哪些类型
Apr 29 #Javascript
JavaScript实现简单图片切换
何时使用Map来代替普通的JS对象
详解Js模块化的作用原理和方案
You might like
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
Javascript之文件操作
2007/03/07 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
python 中split 和 strip的实例详解
2017/07/12 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
python图片合成的示例
2020/11/09 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
竞选班长演讲稿
2013/12/30 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
公务员政审材料
2014/12/23 职场文书
重阳节慰问信
2015/02/15 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书