45个实用的JavaScript技巧、窍门和最佳实践_H5之家

for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name } }

27 – 逗号操作符

var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 99

28 – 缓存需要计算和查询（calculation or querying）的变量

对于jQuery选择器，我们最好缓存这些DOM元素。

var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');

29 – 在调用 isFinite()之前验证参数

isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undifined); // false isFinite(); // false isFinite(null); // true !!!

30 – 避免数组中的负数索引（negative indexes）

var numbersArray = [1,2,3,4,5]; var from = numbersArray.indexOf("foo") ; // from is equal to -1 numbersArray.splice(from,2); // will return [5]

确保调用 indexOf 时的参数不是负数。

31 – 基于JSON的序列化和反序列化（serialization and deserialization）

32 – 避免使用 eval() 和 Function 构造函数

使用 eval 和 Function 构造函数是非常昂贵的操作，因为每次他们都会调用脚本引擎将源代码转换成可执行代码。

var func1 = new Function(functionCode); var func2 = eval(functionCode);

33 – 避免使用 with()

使用 with() 会插入一个全局变量。因此，同名的变量会被覆盖值而引起不必要的麻烦。

34 – 避免使用 for-in 来遍历一个数组

避免使用这样的方式：

var sum = 0; for (var i in arrayNumbers) { sum += arrayNumbers[i]; }

更好的方式是：

var sum = 0; for (var i = 0, len = arrayNumbers.length; i < len; i++) { sum += arrayNumbers[i]; }

附加的好处是，i 和 len 两个变量的取值都只执行了一次，会比下面的方式更高效：

for (var i = 0; i < arrayNumbers.length; i++)

为什么？因为arrayNumbers.length每次循环的时候都会被计算。

35 – 在调用 setTimeout() 和 setInterval() 的时候传入函数，而不是字符串。

如果你将字符串传递给 setTimeout() 或者 setInterval()，这个字符串将被如使用 eval 一样被解析，这个是非常耗时的。
不要使用：

setInterval('doSomethingPeriodically()', 1000); setTimeOut('doSomethingAfterFiveSeconds()', 5000)

而用：

setInterval(doSomethingPeriodically, 1000); setTimeOut(doSomethingAfterFiveSeconds, 5000);

36 – 使用 switch/case 语句，而不是一长串的 if/else

在判断情况大于2种的时候，使用 switch/case 更高效，而且更优雅（更易于组织代码）。但在判断的情况超过10种的时候

不要使用 switch/case。

37 – 在判断数值范围时使用 switch/case

在下面的这种情况，使用 switch/case 判断数值范围的时候是合理的：

function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category; } getCategory(5); // will return "Baby"

【译者注：一般对于数值范围的判断，用 if/else 会比较合适。 switch/case 更适合对确定数值的判断】

38 – 为创建的对象指定prototype对象

写一个函数来创建一个以指定参数作为prototype的对象是有可能：

function clone(object) { function OneShotConstructor(){}; OneShotConstructor.prototype= object; return new OneShotConstructor(); } clone(Array).prototype ; // []

39 – 一个HTML转义函数

function escapeHTML(text) { var replacements= {"<": "<", ">": ">","&": "&", "\"": """}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); }

40 – 避免在循环内部使用 try-catch-finally

在运行时，每次当 catch 从句被执行的时候，被捕获的异常对象会赋值给一个变量，而在 try-catch-finally 结构中，每次都会新建这个变量。

避免这样的写法：

var object = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i++) { try { // do something that throws an exception } catch (e) { // handle exception } }

而使用：

var object = ['foo', 'bar'], i; try { for (i = 0, len = object.length; i <len; i++) { // do something that throws an exception } } catch (e) { // handle exception }

41 – 为 XMLHttpRequests 设置超时。

在一个XHR请求占用很长时间后（比如由于网络问题），你可能需要中止这次请求，那么你可以对XHR调用配套使用 setTimeout()。

此外，一般你应该完全避免同步的Ajax请求。