JS開發中的一些小技巧和方法

前言

這兩年前端很火，JavaScript又是前端的必會技能，在JavaScript開發中其實有一些有意思的小技巧和方法，本文記錄了一些我工做中遇到的一些技巧和方法。

首發地址個人博客

正文

生成指定範圍內的隨機數

當咱們須要獲取指定範圍(min,max)內的整數的時候，下面的代碼很是適合；這段代碼用的還挺多的。

function setRadomNum(min,max){
    return  Math.floor(Math.random() * (max - min + 1)) + min;
}

json轉url參數

當咱們進行http請求時，可能須要把json轉化爲url參數，這時下面這段代碼就派上用場了。

function json2url(json) {
    var arr=[];
    for(var name in json){
        arr.push(name+'='+json[name]);
    }
    return arr.join('&');
}

驗證是否爲數組

function isArray(obj){
    return Array.isArray(obj) || Object.prototype.toString.call(obj) === '[object Array]';
}

先檢驗本地是否有Array.isArray函數，沒有就執行後面的方法檢測。

清空數組

方式一 經過將長度設置爲0
var arr=[1,2,3,4,5];
arr.length=0;

方式二 經過splice方法
 var arr=[1,2,3,4,5];
arr.splice(0,arr.length);

//方式三
var arr=[1,2,3,4,5];
arr=[];

方式三將一個新的數組的引用賦值給變量，其餘引用並不受影響。 這意味着之前數組的內容被引用的話將依舊存在於內存中，這將致使內存泄漏。最高效的方法是第一種，因此推薦使用第一種方法清空數組。

保留指定小數位

這個需求在項目中也是很常見的，能夠toFixed()方法

var num =3.1415926;
num = num.toFixed(4); //toFixed()方法可把 Number 四捨五入爲指定小數位數的數字，括號裏面取值0~20（包括0和20）
console.log(num); //3.1416

打亂數組的順序

方式一
arr.sort(function(){return Math.random()-0.5});

方式二
function shuffle(arr) {
    var i, 
        j,
        temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;    
};

方式一使用了數組的內置排序方法：sort，而方式二是藉助了一箇中間量，隨機數組裏的兩個值，讓它們交換位置。

使用 === 而不是 ==

== (或者 !=) 操做在須要的狀況下自動進行了類型轉換。=== (或 !==)操做不會執行任何轉換。===在比較值和類型時，能夠說比==更快。

[10] ==  10      // 爲 true
[10] === 10      // 爲 false

'10' ==  10      // 爲 true
'10' === 10      // 爲 false

 []  ==  0       // 爲 true
 []  === 0       // 爲 false

 ''  ==  false   // 爲 true 但 true == "a" 爲false
 ''  === false   // 爲 false

妙用「&&」和「||」

||和&&運算符妙用，可用於精簡代碼，下降程序的可讀性。

用於賦值
&&：從左往右依次判斷，噹噹前值爲true則繼續，爲false則返回此值（是返回未轉換爲布爾值時的原值哦）
|| ： 從左往右依次判斷，噹噹前值爲false則繼續，爲true則返回此值（是返回未轉換爲布爾值時的原值哦）

var attr = true && 4 && "aaa"; //aaa;

var attr = true && 0 && "aaa"; //0

var attr = 100 || 12; //100

var attr = "e" || "hahaha" //'e'

var attr = "" || "hahaha" //'hahaha'

用於條件執行語句

// 普通的if語句
if(test){
  isTrue();
}
// 上面的語句可使用 '&&' 寫爲：
( test && isTrue() );


test = false;
if(!test){
  isFalse();
}
// 上面的語句可使用 '||' 寫爲：
( test || isFalse());

用於屢次判斷後的賦值

var add_level = 0; 
if(add_step == 5){ 
    add_level = 1; 
} 
else if(add_step == 10){ 
    add_level = 2; 
} 
else if(add_step == 12){ 
    add_level = 3; 
} 
else if(add_step == 15){ 
    add_level = 4; 
} 
else { 
    add_level = 0; 
}

//能夠寫成
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

獲取數組中的最大值或最小值

function maxAndMin(arr){
    return {
       max:Math.max.apply(null,arr.join(',').split(',')),
       min:Math.min.apply(null,arr.join(',').split(','))
    }
}

該方法適合一維或者多維數組。

隨機獲取數組裏的元素

function getRadomFromArr(arr){
    return arr[Math.floor(Math.random()*arr.length)];
}

從數組裏查找指定的值

查到了返回true，沒查到返回false。

function findInArr(arr, value){
    for (var i=0; i<arr.length; i++){
        if (arr[i] == value){
            return true;
        }
    }    
    return false;
}

生成指定長度的隨機數字字母字符串

function getRandomStr(len) {
    var str = "";
    for( ; str.length < len; str  += Math.random().toString(36).substr(2));
    return  str.substr(0, len);
}

去除字符串的空格

雖然在ECMAScript5中已經實現了trim方法，它對低版本瀏覽器並不支持，因此有時候咱們須要本身實現。

去除首尾空格

function trim(str){
    return str.replace(/(^\s*)|(\s*$)/g, "");
}

trim('  hello world    '); //"hello world"

去除全部空格

function trimAll(str){
    return str.replace(/\s+/g,"");
}

trimAll('   he ll o  wo  r ld    '); //"helloworld"

後記

JavaScript裏面確定還有不少技巧，之後遇到了慢慢總結。JavaScript的水很深，感受還有好多要學的。加油！！！