《JavaScript 模式》读书笔记(2)— 基本技巧2

  前一篇,简单介绍了一些js代码的基本技巧。那么这篇文章,我们继续后续的内容。

一、for循环

  for循环经常用在遍历数组或者类数组对象,如引数(arguments)和HTML容器(HTMLColltion)对象。通常for循环模式使用如下:

for(var i = 0; i < myarray.length; i++) {
    // 对myarray[i]做操作
}

  这种模式的问题在于,每次循环迭代时都要访问数据的长度。这样不好。所以:

for(var i = 0, max = myarray.length; i < max; i++) {
    // 对myarray[i]做操作
}

  我们可以这样,先把长度存储起来,这样就不会每次循环都要去访问数据的长度了。尤其在一些DOM操作下,访问的速度很慢。

  下面是单变量模式,也可以将变量放到循环以外:

function looper() {
    var i = 0,
        max,
        myarray = [];
    // ...
    for (i = 0,max = myarray.length; i < max; i++){
        //处理myarray[i]
    }
}

  这种模式的好处在于一致性,因为它贯穿了单一变量的模式。缺陷在于创建代码时黏贴和复制整个循环比较麻烦。例如,如果要从一个函数复制循环至另一个函数,必须确保能将i和max携带至新函数中(如果这几个量在愿函数中不再需要,则很可能会删除掉它们了)。注意,这里的复制并不是说单纯的复制代码至另一处,而是通过js的代码复用模式在另一个函数中使用。

  对于循环的最后一个改进,时使用i++代替一下两种表达式:

  • i = I + 1
  • i += 1

  for模式重的两个变量引出了一些细微的操作,原因是:

  • 使用了最少的变量(而非最多)
  • 逐步减至0,这样通常更快,因为同0比较比同数组的长度比较,或同非0数组的比较更有效率。

  第一个修改后的模式:

var i ,myarray = [];
for(i = myarray.length; i--;){
    // 处理myarray[i]
}

  第二个使用while循环:

var myarray = [],i = myarray.length;
while(i--){
    //处理myarray[i]
}

  

二、for-in循环

   for-in循环应该用来遍历非数组对象。使用for-in循环也被成为枚举(enumeration)。从技术上来说,可以使用for-in循环来遍历数组(因为在JavaScript中,数组也是对象),但是不推荐这样做,因为当该数组对象已经被自定义函数扩大后,这样做有可能会导致逻辑上的错误。

var myarray = ['a','b','c','d'];
for(var i in myarray) {
    console.log(i)
    console.log(myarray[i])
}

  当遍历对象属性来过滤遇到原型链的属性时,使用hasOwnProperty()方法时非常重要的。比如:

var man = {
    hands:2,
    legs:2,
    heads:1
}

//代码的其他部分
//将一个方法添加到所有对象上
if(typeof Object.prototype.clone === 'undefined'){
    Object.prototype.clone = function () {};
}
// 反模式
for(var i in man) {
    console.log(i + ':' + man[i])
}

  或者,这样才是你想要的:

var man = {
    hands:2,
    legs:2,
    heads:1
}

//代码的其他部分
//将一个方法添加到所有对象上
if(typeof Object.prototype.clone === 'undefined'){
    Object.prototype.clone = function () {};
}

for(var i in man) {
    if(man.hasOwnProperty(i)) {
        console.log(i + ':' + man[i])
    }
}

  那多说一句,Object.hasOwnProperty()方法是干什么的?方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。这是MDN上的说法。也就是说,该方法会告诉你,该属性是否是该对象自身的属性,而非其他来源(比如原型链上的属性)。

  另一种使用hasOwnProperty()的模式是在Object.property中调用该函数,比如:

for(var i in man) {
    if(Object.prototype.hasOwnProperty.call(man,i)) {
        console.log(i + ':' + man[i])
    }
}

  在使用hasOwnProperty对man对象进行精炼后,可以有效的避免命名冲突,也可以使用一个本地变量来缓存比较长的属性名,比如:

var i,
    hasOwn = Object.prototype.hasOwnProperty;

for(i in man) {
    if(hasOwn.call(man,i)) {
        console.log(i + ':' + man[i])
    }
}

  注意:严格来讲,不使用hasOwnProperty()并没有错。依赖于具体任务和对代码的自信,您可以略过该方法并稍微加速循环的执行速度。但是当确认不了对象的内容(和原型链)时,最好还是加上hasOwnProperty()这样的安全检查。

  有一种格式化的变种,但是个人极不推荐这样使用,因为:可读性极差,无法通过JSLint检查:

var i,
    hasOwn = Object.prototype.hasOwnProperty;

for(i in man) if(hasOwn.call(man,i)) {
    console.log(i + ':' + man[i])
}

  唯一的优点就是省了一个花括号?

 

三、不要增加内置的原型

  增加构造函数的原型属性是一个增强功能性的强大的方法,但是有时候该方法会过于强大。增加内置构造函数(比如Object(),Array(),Function()等)的原型是很有诱惑力的,但是这可能严重影响可维护性,因为这种做法将使代码变得更加不可预测。

  因此,最好的方法就是不要给内置的原型增加属性,除非:1、未来的ECMAScript版本或JavaScript的具体实现可能将该功能作为一个统一的内置方法时。2、如果检查了自定义的属性或方法并未存在时。或者为了统一不同浏览器或相同浏览器的不同版本而进行的兼容时,前提是要检查是否存在。3、文档记录,并与团队沟通清楚。

  如果确实遇到上面的场景,你可以这样:

if(typeof Object.prototype.myMethod !== 'function'){
    Object.prototype.myMethod = function () {
        // implementation
    }
}

  

四、switch模式

  说到switch,我要多说一句,很多新手都会纠结是if-else性能更好,还是switch性能更好。首先,抛却具体场景谈性能,就是耍流氓。其次,switch在c++这样的语言中,性能确实要稍微好一点。但是,在JavaScript中,两者几乎无任何区别,而且switch还可能会引起意外的问题,所以建议使用if-else。

  你如果你确定switch是一个更好的选择,那么你可以这样:

var inspect_me = 0,
    result = '';
switch (inspect) {
case 0:
    result = 'zero';
    break;
case 1:
    result = 'one';
    break;
default:
    result = 'unknow';
    break;
}

  通常,格式是这样的:

  • 使每个case和switch纵向排列整齐(打括号的缩紧是个例外)。
  • 在每个case中使用代码缩进。
  • 在每个case语句结尾有个明确的break语句。
  • 避免使用fall-throughs(也就是有意不使用break语句,以使得程序会按顺序一直向下执行)。如果确实希望使用fall-throughs,那么请确信在代码中使用fall-throughs是最好的途径,因为当别人阅读这段代码时会认为这是一个错误。
  • 用default语句来作为switch的结束:当以上场景都不匹配时,给出一个默认的结果。

 

五、避免使用隐式类型转换

  不要在你的程序中使用==或者!==,请使用===和!===。因为JavaScript在使用比较语句时会执行隐式类型转换。转换的场景可能比你知道的要多得多。

 

六、避免使用eval()

  eval()是个魔鬼,它可以实现你的梦想,也可以夺走你的灵魂。所以,请一定避免在你的代码中使用eval()。

  该函数可以将任意字符串当作一个JavaScript代码来执行。当需要讨论的代码是预先就编译好的(不是在动态运行时决定),是没有理由需要使用eval()的。而如果代码是在运行时动态生成的,则也有其他更好的方法来代替eval()实现其功能。比如:

// 反模式
var property = 'name';
alert(eval("obj." + property));

// 推荐的方法
alert(obj[property])

  使用eval()也包含一些安全隐患,因为这样做有可能执行被篡改过的代码(例如来自网络的代码)。

  还有一点需要牢记的是。通过setInterval(),setTimeout()和function()等构造函数来传递参数,在大部分情形下,会导致类似eval()的隐患,因此应尽量避免使用这些函数。在幕后,JavaScript仍然不得不评估和执行以程序代码方式传递过来的字符串:

// 反模式
setTimeout('myFunc()',1000);
setTimeout('myFunc(1,2,3)',1000);

// 推荐的模式
setTimeout(myFunc,1000);
setTimeout(function() {
    myFunc()
},1000)

  使用new Function()构造函数和使用eval()比较类似,因此该函数的使用也需要十分小心,该函数是一个功能强大的函数,但是通常容易被误用。如果一定需要使用eval(),那么可以考虑使用new Function()来代替。这样做的一个潜在好处是由于在new Function()中的代码将在局部函数空间中运行,因此代码中任何采用var定义的变量不会自动成为全局变量。另一个避免自动成为全局变量的方法是将eval()调用封装到一个即时函数中。

  看下面的代码,在这里只有un这个变量仍然是一个全局变量,会影响到命名空间:

console.log(typeof un);
console.log(typeof deux);
console.log(typeof trois);

var jsstring = "var un = 1; console.log(un)";
eval(jsstring);

jsstring = "var deux = 2; console.log(deux)";
new Function(jsstring)();

jsstring = "var trois = 3; console.log(trois)";
(function() {
    eval(jsstring);
}());

console.log(typeof un);
console.log(typeof deux);
console.log(typeof trois);

  另一个new Function()和eval()的区别是eval()会影响到作用域链,而Function更多的类似于一个沙盒。无论在哪里执行Function,它都仅仅能看到全局作用域。因此对局部变量的影响比较小。下面的例子,eval()可以访问和修改它外部作用域的变量,然而Function不行(请注意使用Function和使用new Function是一样的)。

(function () {
    var local = 1;
    eval("local = 3;console.log(local)");
    console.log(local);
}());

(function() {
    var local = 1;
    Function("console.log(typeof local);")();
}())

 

七、使用parseInt()的数值约定

   通过使用paresInt(),可以从一个字符串中获取数值。该函数的第二个参数是一个禁止参数,通常可以忽略该参数,但是最好不要这样做。因为当解析的字符串是0开头,就会出现错误:例如在处理日期是只有一部分日期会进入字段。在ECMAScript 3中,0开始的字符串会被当作一个八进制数,而在ECMAScript 5中发生了改变。为了避免不一致性和为预期的结果,请每次都指定具体进制参数:

var month = '06',
    year = '09';
month = parseInt(month,10);
year = parseInt(year,10);
console.log(month,year);

  另一个将字符串转换成数值的方法是:

Number('01');

  这种方法通常会比parseInt()快很多,因为正如其名称一样,parseInt()是解析而不是简单的转换。但是如果希望“08 hello”会返回一个数值,那么除了parseInt()之外,其他方法都会失败并返回NaN。

  这篇内容比较多,但是在实际的工作中十分具有价值。下一篇会讨论一些规范和约束,比如命名,打括号,缩进空格等在编码中的处理。

posted @ 2020-03-18 21:56  Zaking  阅读(...)  评论(...编辑  收藏