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