Js类型转换之相等运算符[初级]「建议收藏」

Js类型转换之相等运算符[初级]「建议收藏」Js类型转换之相等运算符[初级]

大家好,又见面了,我是你们的朋友全栈君。

(注:此篇博客主要讨论相等运算符的类型转换)

发现问题

几天前在审查公司实习生代码时查出一个bug,代码是这样写的:

                                                               pic1

他这里的业务是先从接口中拿到某个对象的数据,如果这个对象为空的话会将它赋值为null,

如果对象有值做进一步处理,如果对象的str属性不为空再做某些处理。

当然,这里做if判断的话完全没有必要写这个==true 直接通过obj和str来判断就可以了 即

                                                           pic2

但是最开始的时候我也不觉得他的写法(pic1)有什么逻辑上的影响,后来才发现这两种写法有着天差地别。pic1中的两个if判断都会永远返回false。

案例解析

首先我们现在控制台打几个简单的语句

我们可以得出:

(结论1)将所有对象包括空对象转成布尔值都会返回true(不包括null)。

(结论2)我们都知道if语句条件判断的括号中可以放变量,也可以放表达式。

  • 如果括号中是变量的话,则直接将其转换为布尔值。
  • 如果括号中是表达式,则先将表达式运算出结果后再将结果取布尔值。

所以针对两个案例中的第一个if判断我们可以模拟出

很明显,第一个判断返回值为true,第二个if判断返回值是false,

我们来分析一下上边这段代码,

首先第一个判断相当于Boolean(o),根据结论1,这个返回值一定是true。

第二个判断会先计算o==true的结果,然后再将其转换为布尔值,可能有少部分同学也会想当然的以为这里会先将o转换为布尔值,和等号右边的类型相同后再作比较,

我们可以在控制台打一下这个表达式:

如果是先将o转成布尔值后再与true做比较的话,返回值一定为true即:

可见他不是这样转换的,那么它是怎样转换的呢? 

我去查了一下红宝书,是这样规定的:

在执行相等运算符时,如果有一方类型为布尔值,那么会将布尔值转换为数字类型后再比较

那在我们这个例子中布尔值true被转换成1,那等号另一端的对象是怎样转换的呢?于是我往下翻,还有这样一条:

如果有一方为对象,另一方为非对象,则执行对象的valueOf方法后得到基本数据类型再作比较,如果得不到基本数据类型,再执行它得toString方法后进行比较。

那我们先看一下我们实例化的对象o继承Object原型上默认定义的valueOf方法和toString()方法会返回什么

所以我们可以猜想o==true判断时经历了以下几个步骤:

  1. 执行o的valueOf方法,返回对象本身
  2. valueOf的返回值不是基本数据类型,执行它的toString方法,返回字符串”[Object Object]”
  3. 将true转换为数据类型,返回1
  4. 判断 “[Object Object]” 是否全等于 1
  5. 返回false

为了验证我们上边的猜想,我在控制台写了以下代码:

足以证明我们的猜想步骤是正确的。

然而我们案例中的第二个判断字符串与布尔值比较也是将其先转换成数值后再进行比较。

相当于:Number(o.str) === Number(true)

前者返回NaN,后者返回1,当然不等。

类型扩展

我们上面的案例是解决了,但是其他类型的相等运算符是怎样转换的呢?

我先提出两个问题 

1.大家都知道 null==undefined 返回的结果为true,那么它是怎样进行类型转换的呢?

2.null==0 undefined==0的返回值分别是多少?

不卖关子,直接说答案

第一个问题

不会进行类型转换

误区:有的同学可能以为null和undefined都会先转换为布尔值,然后再判断相等性。

正确思路:其实他们的相等是js规定的,这里不会进行类型转换。

第二个问题

返回值都为false

误区:如果按照案例中的思路有些人可能会以为null和undefined也是都会被转换为Number后再做判断。

对undefined来讲Number(undefined)返回值为NaN,与0相比返回false很正常,

但是Number(null)的返回值为0 为什么也与0相比返回false呢?

正确思路:其实这里js规定Null和undefined与其他数据类型比较时不会进行类型转换,所以返回结果都为false。

更多类型的相等运算符比较:

来自MDN

转载于:https://juejin.im/post/5ca6040d518825440563e64e

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/106888.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 功能测试数据测试之因果图分析方法[通俗易懂]

    功能测试数据测试之因果图分析方法[通俗易懂]定义是一种利用图解法分析输入的各种组合情况,从而设计测试用例的方法,它适合于检查程序输入条件的各种组合情况。因果图法产生的背景等价类划分法和边界值分析方法都是着重考虑输入条件,但没有考虑输入条件的各种组合、输入条件之间的相互制约关系。这样虽然各种输入条件可能出错的情况已经测试到了,但多个输入条件组合起来可能出错的情况却被忽视了。如果在测试时必须考虑输入条件的各种组合,则可能的组合数目将是天文数字,因此必须考虑采用一种适合于描述多种条件的组合、相应产生多个动作的形式来进行测试用例的设计,这就需要利用

    2022年8月14日
    5
  • PANDAs_pandas去除缺失值

    PANDAs_pandas去除缺失值该函数主要用于滤除缺失数据。如果是Series,则返回一个仅含非空数据和索引值的Series,默认丢弃含有缺失值的行。xx.dropna()对于DataFrame:data.dropna(how=’all’)#传入这个参数后将只丢弃全为缺失值的那些行data.dropna(axis=1)#丢弃有缺失值的列(一般不会这么做,这样会删掉一个特征)data…

    2022年9月18日
    2
  • pycharm中文怎么改成英文_pycharm如何设置英文

    pycharm中文怎么改成英文_pycharm如何设置英文1、选择右上角file(文件)里的setting(设置)2、点击Pulgins,搜索chinese3、找到chinese(simplified)languagepack/中文语言包,一般是搜索里的第一个或第二个4、点击绿色按钮“restartIDE”,在弹出的对话框了选restart,结束。…

    2022年8月28日
    2
  • Python上位机软件图形界面实战(2)[通俗易懂]

    Python上位机软件图形界面实战(2)[通俗易懂]前言上位机图形界面开发设计用QTDesigner就可以了。但是qtdesigner生成的是.ui文件,我们需要将.ui转换为我们用的py文件。这里就要用到昨天设置Pyuic来生成。由于只是初步开发所以设计的界面没有美化,只是体验一下功能就可以了。1Pyuic的修改今天做的时候才发现昨天的Pyuic没设置好。下来在昨天的基础上只修改这两行。-mPyQt5.uic.pyuic$F…

    2022年5月29日
    51
  • linux查看网卡实时速率命令_怎么判断网卡速率是否异常

    linux查看网卡实时速率命令_怎么判断网卡速率是否异常Linux下查看网卡速率信息:1、使用ethtool命令ethtoolethx#查看支持的速率ethx为网卡名,使用ifconfig-a,ipa查询。响应数据中:Linkdetected为yes表示网卡已经连接。2、使用mii-tool命令mii-tooleth0#查看eth0网卡信息,这个命令需要root权限,没有上边的好用。3、查看网卡驱动:…

    2022年10月19日
    2
  • 短视频创作的技巧是什么_短图文创作特点

    短视频创作的技巧是什么_短图文创作特点现在短视频越来越受到大众的喜爱,大概现在每个人坐车休假吃饭都在拿着手机刷着短视频,可见现在短视频对于现在的人来说还是挺普遍的,那么很多人都想从事短视频行业应该如何去进行创作呢,下面就和大家分享平时我会用到的一些小技巧。构思框架在做短视频的时候一定不要想着能够一夜爆火,当然如果你的作品足够优质,那也不排除这样的可能,首先需要你先考虑的是各种因素,主题、定位和内容连贯性,还有视觉效果。在确定主题后,要做好计划,如拍摄方向、表达形式。时间一定要把握住短视频的时长,因为现在短视频推送都是讲究一个完播

    2022年10月5日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号