JS日常编码的一些小坑

2019独角兽企业重金招聘Python工程师标准>>>

    尽量少用全局变量

    这是一个疑问最少,同时流传最广的一条.Javascript使用函数管理作用域,全局变量最大的问题在于同名变量冲突.这种隐患产生比较直接的两个原因就是Javascript语言的特性造成的,即变量不用声明就可以直接使用以及变量不通过var直接使用则默认定义为全局变量.

function fun(){
  var a=b=0;    //a是局部变量,b是全局变量
}

    变量释放时是有副作用的    

    在Javascript中你可以通过delete操作将对象属性删除或者说撤销.使用var创建的全局变量不能通过delete删除,没有使用var的隐含式全局变量可以通过delete删除.如果这么说你不能理解,那么再进一步说隐含式的全局变量严格来讲不是真意义的全局变量,而是全局对象的属性.属性可以通过delete删除,单变量不行    

    全局变量的访问

    并不所有的情况下都能通过window对象访问到全局对象,如果它不叫window对象了,我们可以通过另一种方式取到全局对象:

var gloabl = (function(){
  return this;
}());

    一般来讲,this在函数内部作为一个函数调用时,往往指向全局对象.    

    单一var变量声明

function fun(){
  var a = 1,
      b = 2,
      c = 3,
      d = {},
      e,
      f;
}

    这么做的好处在于:

• • 提供单一的地址以查找函数所需要的所有局部变量.

  • 在顶部声明,防止出现未声明就是用的错误逻辑.

  • 更少的编码,更直观显示定义好的变量.

    变量的"提升"问题

    这类问题我经常在很多公司的面试题里看到,用来考察最作用域以及变量声明的理解.不过这里我们要看一点更实在的问题.

    所谓的变量提升,这里提升的仅仅是声明.在Javascript中无论在哪里声明,效果都等同于在函数顶部声明,但是如果使用在声明之前可能会导致逻辑的错误.这里不得不举一个很常见的例子:

name = "global";
	function fun(){
		alert(name);
		var name = "local";
		alert(name);
	}
	fun();
	// undefined
	// local

    这里你要区分开声明和赋值是两个动作,被"提升"的仅仅是声明.   

    代码处理上分了两个阶段:第一阶段创建变量、函数声明以及形参.这是解析和进入上下文的阶段.第二个阶段是代码运行时,执行过程以及创建函数表达和不合格标识符.所以在ECMAScript其实没有"提升"的概念,这是一种表述.

    for循环

for (var i = 0,len=arr.length-1; i < len; i++) {
	
};

    每次循环不要总是重新计算集合总长,尤其是DOM元素集合时.另外一点是推荐逐步减到0的循环,即i--,因为同0比较要快于同数组长度比较.

    循环的差异以及hasOwnProperty()

    在Javascript的一般使用上,for和for in可能没有结果上的不同,不过还是推荐遍历数组时使用for,如果遍历的是对象属性则使用for in.这里有一个小坑就是遍历对象属性来过滤遇到的原型链属性时,使用hasOwnProperty()方法是很重要的.

    看看代码就明白我说的意思了:

    var obj = {
      a:1,
      b:2,
      c:3
    };

    if(typeof Object.prototype.clone === "undefined"){
      Object.prototype.clone = function(){

      }
    }
    for(key in obj){
      console.log(key);
    }

    这里输出的结果中会有clone,但其实很多时候我们是不想要原型链上的属性的,此时就可以通过hasOwnProperty()过滤掉原型链上的属性.

    for(key in obj){
      if(obj.hasOwnProperty(key)){
        console.log(key);
      }
    }

    不要增加内置的原型

    增加内置构造函数的原型是很有诱惑的,方便的同时也会带来维护以及协作上难以预知的风险.类似Object()或者Array()等都是不可取的.如果有类似的需要可以通过原型增加属性的方式实现,我经常做的就是为Array增加remove的function.

  if (typeof Array.prototype.remove === "undefined") {
    Array.prototype.remove = function(){
      
    }
  };

    勿忘JS隐式类型转换,尽量避免

    因为JS的弱类型特性,所以对于数据类型的确定并不规范.在使用比较语句时会执行隐式类型转换,所以当执行false==0或者""==0这种比较会返回true.所以当要进行比较的时候应该尽量使用===或者!===操作符来保证完全匹配.

    不要省略parseInt()的参数

    parseInt()的第二个参数是一个进制参数,通常可以忽略,但是最好不要这样做.因为当解析的字符串是0开头的就会报错.而且ECMA3和ECMA5对此的处理标准还不一样,所以为了避免不可预知的问题,最好是加上禁止参数.

    最后还有一些非常隐晦的坑,点出来只能通过大家自己注意了.编码规范,比如空格,缩进,大括号位置等.方法以及变量命名规则,这个只有等你后来维护代码的时候才会发现在没有完整注释以及文档的情况下,好的命名是多么重要.

转载于:https://my.oschina.net/blogshi/blog/226328