大家好，又见面了，我是你们的朋友全栈君。
前一篇，简单介绍了一些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。
这篇内容比较多，但是在实际的工作中十分具有价值。下一篇会讨论一些规范和约束，比如命名，打括号，缩进空格等在编码中的处理。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/124398.html原文链接：https://javaforall.net
