JavaScript 常见陷阱与易错点解析

JavaScript 常见陷阱与易错点解析

JavaScript 是目前应用最广泛的编程语言之一，但其语言特性也带来了一些副作用。无论该语言设计得多么精妙，每天都有大量开发者因疏忽产生 Bug。在指责他人之前，不妨先审视自己是否也陷入了类似的误区。

以下列举几个简短且完全合法的 JavaScript 代码片段，你可以直接在浏览器控制台中运行验证：

typeof NaN === 'number' // true
 
Infinity === 1/0 // true
0.1 + 0.2 === 0.3 // false，前面加括号也一样
"3" + 1 // '31' 
"3" - 1 // 2

这些现象是否让你对 JavaScript 的类型系统产生怀疑？

最小值与浮点数精度

1、JS 最小的值

Number.MIN_VALUE > 0; //true

Number.MIN_VALUE 表示 JavaScript 中能表示的最小正值，其值为 5e-324。尽管它极小，但它仍然是大于 0 的最接近 0 的数。

字符串连接与类型转换

2、字符串连接

("foo" + + "bar") === "fooNaN" //true
"why I am " + typeof + "" // why I am number

JavaScript 解析器会将上述代码解析为 "foo" + (+ "bar")。这里 + "bar" 试图将字符串 "bar" 转换为数字，由于无法转换，结果为 NaN。

parseInt 解析规则

3、parseInt 函数

parseInt('06'); // 6
parseInt('08'); // 0 注意，谷歌新版已修正
parseInt(null, 24) === 23 // true

null 的类型判断

4、null 是不是 object

typeof null // object
null instanceof Object // false

return 语句与分号插入

5、return 返回内容

function myjson()
{
return
   [
2
   ]
}
myjson(); // undefined

return 语句返回的内容必须与 return 关键字位于同一行。如果换行，JavaScript 会自动插入分号，导致返回 undefined。

数字表示与精度问题

6、奇怪的数字

012 == 12 // false
'012' == 12 // true
"3" + 1 // '31'
"3" - 1 // 2
0.1 + 0.2 == 0.3 // false
0.1 + 0.7 == 0.8 // false
0.2 + 0.7 == 0.9 // false
9999999999999999 // 10000000000000000
9999999999999999-1 //10000000000000000
111111111111111111111 // 111111111111111110000

arguments 对象与参数引用

7、诡异的参数

function hello(what) {
alert(arguments[0]); //vicky
what = "world";
return "Hello, " + arguments[0] + "!";
}
hello("vicky"); //"Hello, world!"

隐式转换与相等性比较

8、让人头大的等号

NaN === NaN; // false
[] == false; // true
"" == false; // true
null == false; // false
[] == ![] // true
window.window == window // true
window.window === window // false，有些浏览器是true
window == document // true，有些浏览器是false
("0" && {}) == 0 // false
(0 && {}) == 0 // true
0 == "0" // true
[] == 0 // true