for循环
在for循环中你会去迭代一些数组元素或者一些HTML元素。for循环常常如此:
[js]for (var i = 0; i < myarray.length; i++) {
// do something with myarray[i]
} [/js]
这样写的问题在于,每一次迭代的时候都会计算数组的长度,尤其在这个参数不是一个数组而是一组HTML元素的时候会降低你的程序的性能。
HTML元素的集合在页面上,这样每次都会去再页面上查找相应的元素,这是非常耗时的。所以对于for循环,你需要预先保存数组的长度,这样写:
[js]for (var i = 0, max = myarray.length; i < max; i++) {
// do something with myarray[i]
} [/js]
这样缓存了参数的长度,在每次迭代的时候就不用再去查找计算了。
在查找HTML元素集合的时候,缓存参数长度可以带来可观的性能提升,Safari下面提高两倍的速度,在IE7下面提高190倍的速度。
需要注意的是,当你需要操作修改DOM元素的数量的时候,你肯定希望这个值是随时更新的而不是一个常量。
使用下面的单一var模式,你也可以把var提到循环之外:
[js]function looper() {
var i = 0,
max,
myarray = [];
// ...
for (i = 0, max = myarray.length; i < max; i++) {
// do something with myarray[i]
}
} [/js]
这个模式可以增强整个代码的连续性,但是不好的一点是当你重构代码的时候复制粘贴就没那么容易了。例如:如果你想在其他函数中也使用这个循环,那你需要确定在新的函数中处理好了i和max(或许还需要删掉这个)。
这个函数还有两个点可以优化的:
◆可以少一个变量(不需要max)
◆递减到0,一个数字与0比较比这个数字与另外一个数字比较更快
所以就可以写为:
[js]var i, myarray = [];
for (i = myarray.length; i--;) {
// do something with myarray[i]
} [/js]
针对第二点:
[js]var myarray = [],
i = myarray.length;
while (i--) {
// do something with myarray[i]
} [/js]
这是两个比较微小的点的优化。另外,JSLint可能对于i–会有意见。
for-in循环
for-in循环用来迭代非数组的对象。使用for-in循环通常也成为枚举。
从技术上来说,你也可以用for-in来循环数组,因为数组也是对象,但是不推荐。如果数组有一些自定义的扩展函数,那么就会出错。另外,对象属性的顺序在for-in循环中也是不确定的。所以最好还是用普通的循环来循环数组用for-in来循环对象。
在循环对象的过程中,使用hasOwnProperty()方法来检验是对象本身的属性还是原型链上的属性很重要。
看看下面的这个例子。
[js]// the object
var man = {
hands: 2,
legs: 2,
heads: 1
};
// somewhere else in the code
// a method was added to all objects
if (typeof Object.prototype.clone === "undefined") {
Object.prototype.clone = function () {};
} [/js]
在这个例子中,我们有一个简单的称作man的对象字面量。在其他man定义之前或之后的地方,对象原型有一个很有用的clone()方法。因为原型链的原因,所有的对象都自动获得了这个方法。为了在枚举man对象的时候出现clone方法,你需要使用hasOwnProperty方法来区别。如果没有区别来自原型链的方法,那么就会有一些意想不到的事情发生:
[js]// 1.
// for-in loop
for (var i in man) {
if (man.hasOwnProperty(i)) { // filter
console.log(i, ":", man[i]);
}
}
/* result in the console
hands : 2
legs : 2
heads : 1
*/
// 2.
// antipattern:
// for-in loop without checking hasOwnProperty()
for (var i in man) {
console.log(i, ":", man[i]);
}
/*
result in the console
hands : 2
legs : 2
heads : 1
clone: function()
*/ [/js]
另外一种使用方法如下:
[js]for (var i in man) {
if (Object.prototype.hasOwnProperty.call(man, i)) { // filter
console.log(i, ":", man[i]);
}
} [/js]
这样写的好处是可以防止man重新定义了hasOwnProperty方法导致的冲突。如果不想写这么长的一串,你也可以这样:
[js]var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
if (hasOwn.call(man, i)) { // filter
console.log(i, ":", man[i]);
}
} [/js]
严格意义上讲,不适用hasOwnProperty也不是什么错误。根据任务的难度和你对代码的自信程度,你也可以不用这个直接循环。但是当你不确定的时候,最好还是使用这个方法检测一下。
另外一种格式上的改变(不会通过jsLint的检查),去掉for的大括号,然后把if放在同一行。这样做的好处可以让循环体更加突出,缩进也就少一些:
[js]// Warning: doesn't pass JSLint
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // filter
console.log(i, ":", man[i]);
} [/js]
不要扩展内建的原型
扩展原型的构造函数,可以提供一些很强大的功能,但是有时候他太强大了。
有时候你会去扩展Object(),Array(),Fucntion()的原型方法,这样会导致可维护性的问题,因为这会让你的代码的移植性变差。其他的开发人员使用你的代码的时候,可能只需要原生的方法,并不需要额外的功能。
另外,你添加进去的方法,如果在循环的时候没有使用hasOwnProperty方法就会被遍历出来,这会让人很迷惑。
所以,最好还是不要扩展基本的对象。除非是下面的情况:
◆你确定在将来根据ECMAScript规范,浏览器会添加相应的原型方法,那么是可以的,你只不过是提前实现了这个功能。
◆你确定的你要实现的方法不存在–或许有时候在代码的其他的地方实现了,或者有的浏览器支持,这都是不行的。
◆有非常清晰的文档,并且与团队成员沟通过
如果在这些情况之下,那么你就可以添加,最好是下面这种形式:
[js]if (typeof Object.prototype.myMethod !== "function") {
Object.prototype.myMethod = function () {
// implementation...
};
} [/js]
switch模式
按照下面的风格写switch的话,可以提高你的代码可读性和健壮性:
[js]var inspect_me = 0,
result = '';
switch (inspect_me) {
case 0:
result = "zero";
break;
case 1:
result = "one";
break;
default:
result = "unknown";
} [/js]
需要注意下面几个方面:
◆将case和switch对齐。
◆case的内容缩进
◆每一个case之后都有一个清晰的break
◆避免顺序往下执行case,非要如此的话,文档一定要写清楚
◆最后使用default,保证在没有命中case的情况下也有反馈
避免隐藏的类型转换
Javascript在你比较两个变量的时候会进行类型的转换,这就是为什么 false == 0或者”" == 0会返回true。
为了避免这种隐藏的类型转换带来的迷惑,最好使用===或者!==操作符来比较:
[js]var zero = 0;
if (zero === false) {
// not executing because zero is 0, not false
}
// antipattern
if (zero == false) {
// this block is executed...
} [/js]
还有另外一种流派持这样的观点:当==够用时使用===就是多余的。比如,当你使用typeof的时候你知道会返回string,所以没必要使用严格的检验。然而,JSLint要求严格检验;他最大程度使代码在阅读的时候减少歧义,(“这个==是故意呢还是疏漏?”)。
避免使用eval()
如果你在你的代码中使用eval(),那么要记住”eval() is evil”。这个方法会将传入的字符串当做js代码来执行。如果代码是在运行前就确定的,那么没有必要使用eval()。如果代码是在运行时动态确定的,那么也有其他更安全的办法。例如使用方括号形式访问元素的属性:
[js]// antipattern
var property = "name";
alert(eval("obj." + property));
// preferred
var property = "name";
alert(obj[property]); [/js]
使用eval()还有安全问题,比如你运行网络上的一段代码,而这段代码又被别人篡改了。在处理Ajax请求返回的JSON数据的时候,最好还是使用浏览器内建的处理方法,如果对于低端的浏览器不支持的,可以从JSON.org上下载对应的处理库。
另外还要记住使用setTimeout、setInterval以及Function的构造函数的是,传入的字符串的参数,js的处理方法跟eval()类似,所以也要注意。因为,js会把你传入的字符串解析执行:
[js]// antipatterns
setTimeout("myFunc()", 1000);
setTimeout("myFunc(1, 2, 3)", 1000);
// preferred
setTimeout(myFunc, 1000);
setTimeout(function () {
myFunc(1, 2, 3);
}, 1000); [/js]
使用Function的构造函数,跟eval()差不多,也要注意。这是个非常有用的功能,但是常常被错用。如果你必须使用eval(),那么可以考虑new一个Function来替代。另外的一个好处就是,使用Function的构造函数,函数的作用域在本方法内,这样你使用var声明的变量就不会变成全局的。另外一个防止eval()生成全局变量的办法就是使用匿名函数。
看看下面这个例子,只有un变量最终是全局的:
[js]console.log(typeof un); // "undefined"
console.log(typeof deux); // "undefined"
console.log(typeof trois); // "undefined"
var jsstring = "var un = 1; console.log(un);";
eval(jsstring); // logs "1"
jsstring = "var deux = 2; console.log(deux);";
new Function(jsstring)(); // logs "2"
jsstring = "var trois = 3; console.log(trois);";
(function () {
eval(jsstring);
}()); // logs "3"
console.log(typeof un); // number
console.log(typeof deux); // undefined
console.log(typeof trois); // undefined [/js]
eval()和Function构造函数的另一个区别就是eval()会影响到作用域,而Function则相当于一个沙盒。例如:
[js](function () {
var local = 1;
eval("local = 3; console.log(local)"); // logs 3
console.log(local); // logs 3
}());
(function () {
var local = 1;
Function("console.log(typeof local);")(); // logs undefined
}()); [/js]
使用parseInt()转换处理数字
使用parseInt()你可以将字符串转为数字。这个方法支持第二个表示进制的参数,常常被忽略。问题常常在处理一段以0开始的字符串的时候。在ECMAS3标准中,以0开始表示八进制,但是在ES5中又改了,所以为了避免麻烦,最好还是标明第二个参数。
[js]var month = "06",
year = "09";
month = parseInt(month, 10);
year = parseInt(year, 10); [/js]
在这个例子中,如果你使用parseInt(year),就会返回0,因为09被认为是8进制数字,然而9是非法的八进制字符,所以返回0。
其他的可以把字符串转为数字的方法有:
[js]+"08" // result is 8
umber("08") // 8 [/js]
这些通常都比parseInt()快一些,因为parseInt并不只是简单的转换。但是如果你的输入是”08 hello”这样的,那么parseInt()也会返回8,但是其他的方法就只能返回NaN。