12个很是有用的javascript技巧，必看！

提示：该文章是整理别人别人的文章，做者比较多，很难分辨原创做者是谁。

1）使用!!将变量转换成布尔类型

　　有时，咱们须要检查一些变量是否存在，或者它是否具备有效值，从而将他们的值视为true。对于这样的检查，你可使用!!（双重否认运算符），他能自动将任何类型的数据转化为布尔值，只有0、null、“”、undefined或NaN才会返回false，其余的都会返回true。看一个简单的例子：

function Account(cash){
    this.cash = cash;
    this.hasMoney = !!cash;
}
   var account = new Account(100.50);
   console.log(account.cash);        //100.50
   console.log(account.hasMoney);    //true
    
   var emptyAccount = new Account(0);
   console.log(emptyAccount.cash);        //0
   console.log(emptyAccount.hasMoney);  //false

2）使用+将变量转化成数字

　　这个转化比较简单，但它只适合数字字符串，否则就会返回NaN（Not a Number）。看例子：

function toNumber(strNumber){
    return +strNumber;
}
console.log(toNumber('342')); //342
console.log(toNumber('324s')); //NaN
//也能够用于转化Date，返回结果为时间戳
console.log(+new Date());

3）短路条件

　　在编写代码中常常会遇到这样的代码:

　　

if(conected){
    login();
}

　　可使用&&（and链接符）来缩短代码，上面的代码能够缩减为

　　conected&&login();

　　也可使用这种方法来检查对象中是否存在某些属性或者方法

　　user&&user.login();

4）使用||设置默认值

　　在ES6中有默认参数这个功能。为了在旧版浏览器中模拟此功能，可以使用||（or运算符），并把默认值做为他的第二个参数。若是第一个参数返回false，那么第二个参数就会被做为默认值返回

　

function user(name,age){
    this.name = name||'Olive Queen';
    this.age = age||27;
}

var user1 = new user();
console.log(user1.name);//Olive Queen
console.log(user1.age);//27

var user2 = new user('liming',25);
console.log(user2.name);//liming
console.log(user2.age);//25

5）在循环中缓存arr.length

　　这个技巧很是简单，而且在循环处理大数组时可以避免对性能形成巨大的影响。例如for循环

var arr = [1,2,3,'a','ds',4];
for(var i = 0;i<arr.length;i++){
    console.log(arr[i]);
}

对于小数组还好，较大数组的话每一次循环都会获取arr.length，这会产生必定的延迟，为了不这种状况，在for循环开始以前缓存arr.length

var arr = [1,2,3,'a','ds',4];
var len = arr.length;
for(var i = 0;i<len;i++){
    console.log(arr[i]);
}

或者

var arr = [1,2,3,'a','ds',4];
for(var i = 0，len = arr.length;i<len;i++){
    console.log(arr[i]);
}

6）检查对象中的属性

　　当你须要检查某些属性是否存在的时候，避免运行未定义的函数或者属性时，这个技巧就会很是的有用。解决浏览器兼容问题中也可使用这个技巧。例如经过ID获取元素的完美方法

if('querySelector' in document){
    document.querySelector('#id');
}else{
    document.getElementById('id');
}

7）获取数组的最后一个元素

　　Array.prototype.slice（begin，end）能够用来裁剪数组。可是若是没有设置结束参数end的值的话，该函数会自动将end设置为数组长度值。若是将begin的数值设置为复制的话，就会从数组中获取倒数的元素：

var arr = [1,2,3,4,5];
console.log(arr.slice(-1));//[6]
console.log(arr.slice(-2));//[5,6]
console.log(arr.slice(-3));//[4,5,6]

8）数组截断

　　这个技术能够锁定数组的大小，这对于要删除数组中固定数量的元素是很是有用的。

var arr = [1,2,3,4,5,6,7,8,9,10];

arr.length = 5;
console.log(arr);//[1,2,3,4,5]

arr.length = 7;
console.log(arr);//[1,2,3,4,5,undefined,undefined]

若是arr.length设置的数值大于当前数组长度，超过的元素会分配为undefined

9）替换字符串某段元素

　　String.replace()函数容许你使用字符串或正则表达式来替换字符串，自己这个函数只替换第一次出现的字符串，不过你可使用正则表达多中的/g来模拟replaceAll()函数功能：

var str = 'john john';
console.log(str.replace(/hn/,'nan'));//jonan john
console.log(str.replace(/hn/g,'nan'));//jonan jonan

10）合并数组

　　通常须要合并数组，使用Array.concat()方法，字符串也能够看作是数组

var str1 = 'hello';
var str2 = 'world';
console.log(str1.concat(str2));//helloworld
var str3 = [1,2,3];
var str4 = [4,5,6];
console.log(str3.concat(str4));//[1,2,3,4,5,6]

可是该方法对于大数组来讲并不合适，由于他会在内部新建一个数组并消耗大量的内存。原做者推荐使用Array.push.apply(arr1,arr2)，可是在实践后发现其返回的结果始终是最后数组的长度，而不是数组的各个元素；并且有博主曾经作过Array.concat与Array.push.apply之间性能的测试实验。结果显示Array.concat操做的数组长度没有显示，而Array.oush.apply操做的数组因浏览器不一样而不一样，通常不能超过十万。

脚本之家有位朋友写过一篇《关于JS数组追加数组采用push.apply的问题》，讨论Array.push.apply的问题，最后采用forEach，不只能够避免数组过大的问题，并且从性能考虑forEach也是最快的。

var arr = [1,2,3,4,5,6,7,8,9];
arr.forEach(function(a){
    console.log(a);
});

可是在IE中该方法不能正常执行，提示Array不支持此属性或此方法，即IE的Array中没有forEach方法。可是能够添加原型方法

    //Array.forEach implementation for IE support..  
    //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach  
    if (!Array.prototype.forEach) {  
        Array.prototype.forEach = function(callback, thisArg) {  
            var T, k;  
            if (this == null) {  
                throw new TypeError(" this is null or not defined");  
            }  
            var O = Object(this);  
            var len = O.length >>> 0; // Hack to convert O.length to a UInt32  
            if ({}.toString.call(callback) != "[object Function]") {  
                throw new TypeError(callback + " is not a function");  
            }  
            if (thisArg) {  
                T = thisArg;  
            }  
            k = 0;  
            while (k < len) {  
                var kValue;  
                if (k in O) {  
                    kValue = O[k];  
                    callback.call(T, kValue, k, O);  
                }  
                k++;  
            }  
        };  
    }  

11）打乱数组内的元素

 

var list = [1,2,3,4.5,55];
var arr = list.sort(function(){
    return Math.random()-0.5;
});
console.log(arr);//[4.5,1,2,3,55]
console.log(arr[2]);//2

我暂时没有发现这个技巧有什么特别的用处，就只是打乱数组内的元素，生成的是一个新的数组。

12）将Nodelist转换为数组

　　DOM操做document.querySelectorAll('p')，或者document.getElementsByTagName都会返回一个DOM元素数组，即Nodelist对象，可是这个对象并无一些属于数组的函数，如sort()、reduce()、map()、filter()。为了启用这些函数，以及数组的其余原生函数，须要将Nodelist转化为数组。这就要用到[].slice.call(elements)或者Array.from(elements)

var eles = document.querySelectorAll('div');
var arrEles = [].slice.call(eles);
//var arrEles = Array.from(eles);
console.log(arrEles);//[div.big,div#small]

返回的是元素的数组，div.big表示元素div的class为big。