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

12个非常有用的javascript技巧，必看！

2024-09-26 20:16:01   217人阅读

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

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技巧，必看！


联系
我们