首页 > 代码库 > 12个非常有用的javascript技巧,必看!

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)替换数组元素

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

这看似是在数组替换元素中增加了正则表达式中的内容,全局匹配g

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)

 

12个非常有用的javascript技巧,必看!