怪异的JavaScript系列
Posted Fundebug
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怪异的JavaScript系列相关的知识,希望对你有一定的参考价值。
译者按: javascript有很多坑,经常一不小心就要写bug。
原文: What the f*ck JavaScript?
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
JavaScript是一门伟大的语言,它拥有非常简洁的语法,庞大的生态系统,以及最重要的:有一个伟大的社区支撑着。同时,我们也知道JavaScript是一个充满技巧性的语言。有些坑足以让我们崩溃,也有些奇淫技巧让我们觉得很有趣。本文的思想源自于Brian Leroux在dotJS2012上的演讲“WTFJS” at dotJS 2012。
我收集这些例子的主要目的是将它们整理并清楚理解它们的原理。从中学到很多以前不懂的知识是一件很有趣的事情。如果你是初学者,你可以通过学习这些笔记深入理解JavaScript;如果你是一个专业的开发者,那么可以将这些笔记作为一个不错的引用资料。不管怎样,只要读下去,你就会学到新东西的。
[]等于![]
[ ] == ![ ] // -> true |
相等(==)判断操作会将两边的类型都转换为数字(number),然后再比较。因为[]
和![]
都会转换为0
。我们可以理解[]
是一个数组,只不过为空而已,那么为true。右侧![]
则为false。false然后转换为数字0。左侧[]
直接转换为数字,因为空数组会转换为0
,所以尽管我们认为[]
为true,这里却变成了0
。
下面是简化的计算过程:
+[] == +![] |
参考:
12.5.9 Logical NOT Operator (!)
7.2.13 Abstract Equality Comparison
true 是 false
!!'false' == !!'true' // -> true |
true是一个真值,用1表示;字符串的“true”
则为NaN。
true == 'true' // -> false |
‘false’是一个有意义的字符串。
!!'false' // -> true |
参考:7.2.13 Abstract Equality Comparison
baNaNa
'b' + 'a' + + 'a' + 'a' // -> baNaNa |
这是一个旧笑话,不过改进过的。原始的长这样:
'foo' + + 'bar' // -> 'fooNaN' |
该表达式以'foo' + (+'bar')
的形式计算,因为bar
不是数字,所以转换为NaN。
参考:
12.8.3 The Addition Operator (+)
12.5.6 Unary + Operator
NaN不等于NaN
NaN === NaN // -> false |
根据===
的算法,我们可以容易理解为什么为false。
如果typeof(x)和typeof(y)不同,那么返回false.
否则,如果typeof(x)是Number,那么
如果x是NaN,那么返回false;
如果y是NaN,那么返回false;
…
由此可以得出值为false的结论。
fail
(![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]] // -> fail |
如果我们仔细观察序列的规律,会发现下面的模式出现很多次:
(![]+[]) // -> 'false' |
因此,我们尝试将[]和false相加。但是根据内部一些列函数的计算(binary + Operator -> ToPrimitive -> [[DefaultValue]]),右侧的[]最终转换为string:
(![]+[].toString()) // 'false' |
对于一个字符串,我们就可以通过下标来获取对应的字符:
'false'[0] // -> 'f' |
剩下的都很直观,除了i
很取巧。fail
中的i
是通过在falseundefined
中获取第十个下标对应的字符而得到。
[]包含值,但不是true
空数组不等于true。(An array is a truthy value, however, it’s not equal to true.)
!![] // -> true |
参考:
12.5.9 Logical NOT Operator (!)
7.2.13 Abstract Equality Comparison
null不等于false
尽管null是一个false的值,但是null不等于false。
!!null // -> false |
不过,如果和其它false的值比较,那么他们又是相等的。
0 == false // -> true |
参考: 7.2.13 Abstract Equality Comparison
JavaScript坑很多,赶紧使用fundebug扶一扶!
document.all是一个对象,不过是undefined
⚠️这个是前端浏览器API,在Nodejs环境无法使用。
尽管document.all可以返回一个像数组一样的对象,可以用来访问DOM节点。但是呢,通过typeof查看document.all,你会惊讶地发现类型是undefined
。
document.all instanceof Object // -> true |
而且,document.all并不等于undefined。
document.all === undefined // -> false |
而且,更惊讶的是:
document.all == null // -> true |
document.all是一个过去常用的获取DOM元素的方法,特别是老版本的IE。但是从未进入标准,尽管广泛使用在过去的JS代码中。当新的API突出来(比如document.getElementById)后,document.all就被淘汰了。标准委员会不得不觉得怎么处理它。可是因为它已经被广泛使用,所以委员会觉得保留它,但是违背了JavaScript的规范。
参考:
Obsolete features - document.all
Chapter 4 - ToBoolean - Falsy values
最小值比0还大
Number.MIN_VALUE
是最小的数,但是它比0还大。
Number.MIN_VALUE > 0 // -> true |
因为Number.MIN_VALUE
是5e-324
。也就是说即使最小的值也可以用浮点数表示出来,虽然离0很接近,但是依然比0大。其实最小的数是Number.NEGATIVE_INFINITY
,尽管它不是一个实际存在的数。
在StackOverflow有相关问题:Why is 0 less than Number.MIN_VALUE in JavaScript?。
参考: 20.1.2.9 Number.MIN_VALUE
以上是关于怪异的JavaScript系列的主要内容,如果未能解决你的问题,请参考以下文章
Javascript setTimeout / clearTimeout在电子中的怪异行为