【视频教程】JS空数组比较-冰山工作室-沙翼-web前端

CodeStellarEclipse
• 阅读 2083

【视频教程】JS空数组比较-冰山工作室-沙翼-web前端

课程视频-JS空数据比较

前言

先上题,得出心中答案,打开浏览器点开F12,复制下面代码,看看结果。

console.log( [] == ![] )

console.log( {} == !{} )

剖析一下,主要分为:

  1. !逻辑运算符的优先级,
  2. {}与[]复杂数据类型如何转换;
  3. == JS的数据类型的强制转换比较;

逻辑运算符的优先级

运算符优先级本身是一种规则,该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。

先看MDN运算符优先级图表截取:

优先 运算类型 关联性 运算符
20 圆括号 n/a (...)
19 new(带参数列表) 从左到右 new...(...)
函数调用 从左到右 ..(..)
16 逻辑非 从右到左 !...
一元加法 从右到左 +...
一元减法 从右到左 -...
10 等号 从左到右 ...==...
6 逻辑与 从左到右 ...&&...
5 逻辑或 从左到右 ...II...

MDN完整地址

在截取的表格中可以清晰的看到,逻辑非 ! 的优先级明显高于 == 等号的有优先级,因此第一个问题,在 [] == ![] 中最优先运算的是 ![] ,然后才是 == 比较。

复杂的数据类型如何转换

console.log(![]) // false ,这个结果相对好理解
// 注意: !带有隐式转换
  • undefined(未定义,找不到值时出现)
  • null(代表空值)
  • false(布尔值的false,字符串"false"布尔值为true)
  • 0(数字0,字符串"0"布尔值为true)
  • NaN(无法计算结果时出现,表示"非数值";但是typeof NaN==="number")
  • ""(双引号)或''(单引号) (空字符串,中间有空格时也是true)

6种值转化为布尔值时为 false 。

当前结论 ![] == false,当然,在使用 == 时永远不要大意!参见附1;接下来,难题在于, [] 如何转化进行比较。请先记住一个比较的基本规则:

数组与数值进行比较,会先转成数值,再进行比较;与字符串进行比较,会先转成字符串,再进行比较;与布尔值进行比较,两个运算子都会先转成数值,然后再进行比较。

附1:

相等运算符(==)隐藏的类型转换,会带来一些违反直觉的结果,下面整理一些:

0 == ''             // true
0 == '0'            // true
  
2 == true           // false
2 == false          // false
// 参见图1第7条
  
false == 'false'    // false
false == '0'        // true
  
false == undefined  // false
false == null       // false
null == undefined   // true
  
' \t\r\n ' == 0     // true
// \t \r \n都是转义字符,空格就是单纯的空格,输入时可以输入空格
// \t 的意思是 横向跳到下一制表符位置
// \r 的意思是 回车
// \n 的意思是回车换行

遵循上边的规则(左侧x为数组时),需要将 [] 与 false 一并转化为数字类型后再进行比较。OK,那么这个规则是谁说的算的呢?
截取一张知乎大佬贴的Es5 规范元知识图,下述比较参见 7 条。附2(中文版)

【视频教程】JS空数组比较-冰山工作室-沙翼-web前端

附2:

【视频教程】JS空数组比较-冰山工作室-沙翼-web前端

参照第7条:

ToNumber(false) // 0

为啥呢?上图

【视频教程】JS空数组比较-冰山工作室-沙翼-web前端

[] 依照图2,进入第9条,使用 ToPrimitive([]) ,上图

【视频教程】JS空数组比较-冰山工作室-沙翼-web前端

好吧,要根据类型默认使用 DefaultValue 方法,上图

【视频教程】JS空数组比较-冰山工作室-沙翼-web前端

[] 属于字符串hint,那么执行 toString()

console.log([].toString()) // "";

终于,表达式看起来不费劲了,

"" == false ;

每次对比Es5规范非常不方便,所以
结尾总结了一下可以快速判断==转化判断依据的原则,不必每次都参照图2啦 - 附3
完美

 0 == 0 // true

附3

  1. x == y同类型原则总结:
  2. Number比数值(+0,-0相等);
  3. String比长短与字符序列(charCode);
  4. Boolean中false == false; // true;
  5. 复杂数据类型比较引用地址;
  6. x == y不同基础数据类型比较原则总结:
  7. x或y出现NaN一定返回false;
  8. x或y出现Boolean一定全部转化数字后在比较;
  9. x或y出现Number一定全部转化数字后比较;
  10. x == y 包含复杂数据类型原则:
  11. x或y出现复杂数据类型通过valueOf()或toString()转化为基本数据类型, 然后参照上述规则比较;

x == y特殊总结:

  • Null 与 Undefined除彼此或自身外,一律返回false;
  • NaN == NaN; // false

关于我们

原始高清视频下载

视频讲解-提取码:sjgy

QQ答疑交流群:

600633658

我们的链接:

知乎 掘金 今日头条 新浪微博 前端网 思否 简书 B站

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Easter79 Easter79
3年前
sql注入
反引号是个比较特别的字符,下面记录下怎么利用0x00SQL注入反引号可利用在分隔符及注释作用,不过使用范围只于表名、数据库名、字段名、起别名这些场景,下面具体说下1)表名payload:select\from\users\whereuser\_id1limit0,1;!(https://o
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Easter79 Easter79
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这