空数组的比较 [] == ![] --冰山工作室 -- web --沙翼

点击查看视频教程

一、 引子

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

剖析一下,主要分为:

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

二、 逻辑运算符的优先级

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

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

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

MDN完整地址

三、 复杂的数据类型如何转换

6种值转化为布尔值时为 false 。
当前结论 ![] == false
当然,在使用 == 时永远不要大意!参见 附1


接下来,难题在于, [] 如何转化进行比较。
请先记住一个比较的基本规则:
数组与数值进行比较,会先转成数值,再进行比较;与字符串进行比较,会先转成字符串,再进行比较;与布尔值进行比较,两个运算子都会先转成数值,然后再进行比较。
遵循上边的规则(左侧x为数组时),需要将 [] 与 false 一并转化为数字类型后再进行比较。

OK,那么这个规则是谁说的算的呢?
截取一张知乎大佬贴的Es5 规范元知识图,上述比较参见 7 条。附2(中文版)

参照第7条,

为啥呢?上图

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

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


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

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

其实现在我们已经看到答案了,但是依据Es5 == 的规范,我们还需要将字符串和布尔类型转化为数字类型最终比较;
false 参照图2,字符串参照图1第5条,

每次对比Es5规范非常不方便,所以

结尾总结了一下可以快速判断==转化判断依据的原则,不必每次都参照图1啦 - 附3
完美, 0 == 0 // true


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

附2

附3
x == y同类型原则总结:

  1. Number比数值(+0,-0相等);
  2. String比长短与字符序列(charCode);
  3. Boolean中false == false; // true;
  4. 复杂数据类型比较引用地址;

x == y不同基础数据类型比较原则总结:

  1. x或y出现NaN一定返回false;
  2. x或y出现Boolean一定全部转化数字后在比较;
  3. x或y出现Number一定全部转化数字后比较;

x == y 包含复杂数据类型原则:

  1. x或y出现复杂数据类型通过valueOf()或toString()转化为基本数据类型, 然后参照上述规则比较;

x == y特殊总结:

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

引用原地址:

  1. https://www.zhihu.com/question/29615998 // 知乎
  2. https://blog.csdn.net/qiqi_77_/article/details/79456605 // CSDN
  3. http://lzw.me/pages/ecmascript/#105 // ES5规范中文站

关于 冰山工作室

QQ群:600633658

加入我们,前端大佬在线答疑解惑,带你深入了解前端知识。

视频课程网盘地址 提取码 sjgy

学习资料将在 冰山工作室 各平台官方账户同步更新, 直通车⤵️
冰山工作室官网
知乎
掘金
微博
前端网
思否
简书
新闻头条
喜马拉雅


评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复