JavaScript 高质量编码要点笔记

爱被打了一巴掌 2022-07-16 13:09 129阅读 0赞

原文来自 [编写高质量JavaScript代码的基本要点][JavaScript]，本文为经过整理之后的笔记

## 全局变量问题 ##

var a = 5;
    function func(){ 
        b = 6;  //不推荐
    }

1.  不使用没有声明的变量，使用 var 声明
2.  使用var创建的变量不能被delete，直接使用的全局变量可以被delete
3.  单var形式，提供了一个单一的地方去寻找功能所需要的所有局部变量
    
        var a = 1,
            b = 2,
            sum = a + b,
            myobject = {},
            i,
            j;
4.  变量提升问题，变量声明会提升到顶部
    
        var a = 19;
        function func(){ 
            console.log(a);
            var a = 10;
        }
        func();  //输出 undefined
        //上面语句的执行顺序
        var a;  //全局变量声明
        a = 19;
        function func(){ 
            var a;  //局部变量声明
            console.log(a);  //打印局部变量 a
            a = 10;
        }
        func();
5.  函数声明的优先级高于变量声明的优先级，但如果该变量赋值，就覆盖了函数声明

## for循环问题 ##

1.  在循环之前缓存数组(或集合)的长度是比较好的形式
    
        var i, max, myarray = ['hello'];
        for (i = 0, max = myarray.length; i < max; i++) {
           console.log(myarray[i]);
        }
2.  向下数到0，通常更快，因为和0做比较要比和数组长度或是其他不是0的东西作比较更有效率，而且少了max变量
    
        var i, myarray = ['hello'];
        for (i = myarray.length; i--;) {
           console.log(myarray[i]);
        }
3.  for in循环对象，可以使用hasOwnProperty()方法过滤从原型链上下来的属性
    
        var Man = {
           hands: 2,
           legs: 2,
           heads: 1,
        };
        Object.prototype.clone = function() { }
        for (var i in Man) {
           if (Man.hasOwnProperty(i)) { // 过滤
              console.log(i, ":", Man[i]);
           }
        }

## 其他 ##

1.  避免隐式类型转换
    
        var zero = 0;
        if (zero === false) {
           // 不执行，因为zero为0, 而不是false
        }
        
        // 反面示例
        if (zero == false) {
           // 执行了...
        }
2.  避免使用 eval()
3.  给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。
    
        // 反面示例
        setTimeout("myFunc()", 1000);
        setTimeout("myFunc(1, 2, 3)", 1000);
        
        // 更好的
        setTimeout(myFunc, 1000);
        setTimeout(function () { 
           myFunc(1, 2, 3);
        }, 1000);
4.  parseInt()，在ECMAScript 3中，开头为”0″的字符串被当做8进制处理了，但这已在ECMAScript 5中改变了，为了避免矛盾和意外的结果，总是指定基数参数

parseInt("06", 10);  //6
    parseInt("06hello", 10);  //6
    parseInt("hello06", 10);  //NaN
    //以下方法处理较快，但是"06hello"这种字符串只能用parseInt解析
    + "06";  //6
    + "06hello";  //NaN
    Number("06");  //6
    Number("06hello");  //NaN

## 命名规范 ##

1.  对于构造函数，可以使用大驼峰式命名法(upper camel case)，如MyConstructor()
2.  对于函数和方法名称，你可以使用小驼峰式命名法，如myFunction()
3.  其他变量使用下划线命名法，如my\_arr
4.  常量使用全部单词大写加下划线，如MAX\_WIDTH = 800;
5.  私有成员使用前置下划线，如 \_privateKey

## 空格规范 ##

1.  for循环分号分开后的的部分：如`for (var i = 0; i < 10; i += 1) {...}`
2.  for循环中初始化的多变量(i和max)：`for (var i = 0, max = 10; i < max; i += 1) {...}`
3.  分隔数组项的逗号的后面：`var a = [1, 2, 3];`
4.  对象属性逗号的后面以及分隔属性名和属性值的冒号的后面：`var o = {a: 1, b: 2};`
5.  限定函数参数：`myFunc(a, b, c)`
6.  函数声明的花括号的前面：`function myFunc() {}`
7.  匿名函数表达式function的后面：`var myFunc = function () {};`

[JavaScript]: http://www.cnblogs.com/TomXu/archive/2011/12/28/2286877.html