怪异的JavaScript系列(三)-白红宇

译者按： JavaScript有很多坑，经常一不小心就要写bug。

原文:

译者:

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

JavaScript是一门伟大的语言，它拥有非常简洁的语法，庞大的生态系统，以及最重要的：有一个伟大的社区支撑着。同时，我们也知道JavaScript是一个充满技巧性的语言。有些坑足以让我们崩溃，也有些奇淫技巧让我们觉得很有趣。本文的思想源自于在dotJS2012上的演讲。

我收集这些例子的主要目的是将它们整理并清楚理解它们的原理。从中学到很多以前不懂的知识是一件很有趣的事情。如果你是初学者，你可以通过学习这些笔记深入理解JavaScript；如果你是一个专业的开发者，那么可以将这些笔记作为一个不错的引用资料。不管怎样，只要读下去，你就会学到新东西的。

return

下面的函数返回的结果竟然不是对象{b:10}：

(function () {  return  {    b : 10  }})() // -> undefined复制代码

不过，如果稍微改写一下，就不一样了：

(function () {  return {    b : 10  }})() // -> { b: 10 }复制代码

这主要是因为有一个自动行尾加分号的机制在作怪，会自动在很多新行的行尾添加分号。在第一个例子中，实际上是在return后面添加了分号。

(function () {  return ;  {    b : 10  }})() // -> undefined复制代码

JavaScript坑很多，赶紧使用扶一扶！

0.1+0.2=?

一个众所周知的笑话就是0.1加上0.2竟然不等于0.3。

0.1 + 0.2 // -> 0.30000000000000004(0.1 + 0.2) === 0.3 // -> false复制代码

在StackOverflow上有关提到这样的问题“”：

你的程序中0.2和0.3会在底层用相近的数据表达。double类型数据中离0.2最近的数要比0.2大一点点。离0.3最近的double类型数据又刚好比0.3小一点点。所以，结果就是0.1+0.2的结果比0.3大。

这个问题非常出名，以至于有一个专门的网站。在所有使用浮点计算的语言中都有这个问题，不止JavaScript。

神奇的加法操作

999999999999999  // -> 9999999999999999999999999999999 // -> 1000000000000000010000000000000000       // -> 1000000000000000010000000000000000 + 1   // -> 1000000000000000010000000000000000 + 1.1 // -> 10000000000000002复制代码

这个是依据IEEE 754-2008标准确定的二进制浮点运算。当数值大到这个程度，它会取整到最近的偶数。参考：

为Number自定义

你可以为Number和String添加自定义函数：

Number.prototype.isOne = function () {  return Number(this) === 1}1.0.isOne() // -> true1..isOne()  // -> true2.0.isOne() // -> false(7).isOne() // -> false复制代码

你可以想操纵其它对象一样去扩展Number对象。不过，如果定义的函数不在它本身的定义规范(Specification)中，那么不建议这么做。这里是一个参考列表：

3个number比较

1 < 2 < 3 // -> true3 > 2 > 1 // -> false复制代码

我们来看看具体的执行过程就明白了：

1 < 2 < 3 // 1 < 2 -> truetrue  < 3 // true -> 11     < 3 // -> true3 > 2 > 1 // 3 > 2 -> truetrue  > 1 // true -> 11     > 1 // -> false复制代码

有趣的数学

3  - 1  // -> 2 3  + 1  // -> 4'3' - 1  // -> 2'3' + 1  // -> '31''' + '' // -> ''[] + [] // -> ''{} + [] // -> 0[] + {} // -> '[object Object]'{} + {} // -> '[object Object][object Object]''222' - -'111' // -> 333[4] * [4]       // -> 16[] * []         // -> 0[4, 4] * [4, 4] // NaN复制代码

到底是为什么呢？下面有一个表供快速参考：

Number  + Number  -> additionBoolean + Number  -> additionBoolean + Boolean -> additionNumber  + String  -> concatenationString  + Boolean -> concatenationString  + String  -> concatenation复制代码

那么其他例子呢？对于[]和{}，toPrimitive和toString方法会在加法操作前被隐式地调用。

正则也可以做加法？

// Patch a toString methodRegExp.prototype.toString = function() {  return this.source}/7/ - /5/ // -> 2复制代码

参考:

箭头函数

let f = () => 10f() // -> 10复制代码

好的，但是下面这个呢：

let f = () => {}f() // -> undefined复制代码

你也许期待着返回{}，而不是undefined。着主要是因为大括号也是函数定义语法的一部分。如果你真想返回大括号，可以这么写：

let f = () => ({})f() // -> {}复制代码

Math.max()比Math.min()小

Math.min(1,4,7,2)  // -> 1Math.max(1,4,7,2) // -> 7Math.min() // -> InfinityMath.max() // -> -InfinityMath.min() > Math.max() // -> true复制代码

原因:

String不是String的实例

'str' // -> 'str'typeof 'str' // -> 'string''str' instanceof String // -> false复制代码

构造函数String返回一个字符串：

typeof String('str')   // -> 'string'String('str')          // -> 'str'String('str') == 'str' // -> true复制代码

如果我们用new来构建的话:

new String('str') == 'str' // -> truetypeof new String('str')   // -> 'object'复制代码

竟然变成了一个对象！

new String('str') // -> [String: 'str']复制代码

参考: