你可能不知道的一些JavaScript 奇技淫巧

标签：

　　这里记录一下以前学习各种书籍和文章里边出现的JS的小技巧，分享给大家，也供自己查阅，同时感谢那些发现创造和分享这些技巧的前辈和大牛们。

1、遍历一个obj的属性到数组

　　var a=[];
　　for(a[a.length] in obj);
　　return a;

　　乍一看可能比较蒙，不过仔细分析还是不难理解的。常见用法是for(var key in obj)，这里key初始也是undefined的，a[a.length]整体也是undefined，所以二者其实是等价的。在for循环中，obj的属性会依次赋值给key，同样，也依次赋值给a[a.length]，这里length一直在变，就巧妙地挨个赋值给数组的每一个元素了。

2、重复字符串(如abc=>abcabc)

     function repeat(target,n){
          return (new Array(n+1).join(target));
     }

　　改良版本：

     function repeat(target,n){
          return Array.prototype.join.call(
          {length:n+1},target);//之所以要创建带length属性的对象，是因为调用数组原型方法时，必须是一个类数组对象，而类数组对象的条件就是length为非负整数
     }

　　不新建数组，而是用拥有length属性的对象替代，然后调用数组的join方法,性能提升很大　　

　　再改进：

     var repeat=(function(){
          var join=Array.prototype.join,obj={};
          return function(target,n){
               obj.length=n+1;
               return join.call(obj,target);
          }
     })();

　　利用闭包将对象和join方法缓存起来，不用每次都新建对象和寻找方法

3、for循环中，当第二项为false时会终止循环，这里并不一定存在比较，可以直接赋值，如果赋值为undefined之类的值时，转成bool值也为假，因此也会终止，比如遍历数组可以写成：

    for(var i=arr.length,element;element=arr[—-i];){…}

　　这里，第二项一定是arr[—-i]而非arr[i--],如果是后者的话，上来就是undefined，就不会执行循环体，或者for(var i=0,element;element=arr[i++];){…}

4、NaN是JS中唯一不等于自己的值，因此可以用来判断一个变量是否真的为NaN：a!==a

5、“<”，”+”等运算符会强制符号两边的表达式执行valueOf然后比较，所以如果两边是函数或者对象，而又重写了该对象的valueOf方法，就会自动执行两边的方法。如：

    var a={valueOf:function(){console.log(“aaa”);}},b={valueOf:function(){console.log(“bbb”);}};
    a<b;//会输出：aaa;bbb;false;

6、JS具备自动插入分号的能力，但是自动插入分号并不是万能的，其有三条规则：

　　1）只在”}”标记之前、一个或多个换行之后以及程序输入的结尾被插入；

function box(){
     var val=undefined;
     return {
          set:function(x){val=x;},
          get:function(){return val;}
     };
}
var b=box();
b.get();//“undefined”
b.set(5);
b.get();//5

function f(){return “global”;}
function test(x){
     function f(){return “local”}
     var result=[];
     if(x){
          result.push(f());
     }
     result.push(f());
     return result;
}
test(true);//[“local”,”local”]
test(false);//[“local”]

function f(){return “global”;}
function test(x){
     var result=[];
     if(x){
          function f(){return “local”}
          result.push(f());
     }
     result.push(f());
     return result;
} 
test(true);//?
test(false);//?

function f(){return “global”;}
function test(x){
     var result=[];
     if(x){
          var g=function(){return “local”}
          result.push(g());
     }
     result.push(f());
     return result;
}  

SomeObj.someWidget=function(opts){
     return {
          a:blabla,
          b:function(){...},
          c:blabla
     }
}

你可能不知道的一些JavaScript 奇技淫巧

标签：

原文地址：http://www.cnblogs.com/lonelyxmas/p/4421713.html