JS 程式碼的簡單重構與優化

任毅發表於2018-08-07
JS優化

JS 程式碼的簡單重構與優化

1.返回值

//bad
if(age < 20){
    return true;
}else {
    return false;
}

//good
return age < 20;
複製程式碼

2.將陣列長度進行儲存，迴圈時就不用每次都讀取一次陣列長度，提升效能。（適用於一次載入20以上的dataList）

//bad
for(var i = 0; i < array.length; i++){
    const element = array[i];
}

//good
for(var i = 0; len = array.length; i < len; i++){
    const element = array[i];
}
複製程式碼

3.js 中，所有非空字元作布林運算時，都會返回true，反之返回false。

//bad
if(value != ""){
    //do something
}

//good
if(value){
    //do something
}
複製程式碼

4.多層巢狀，進行轉化與拆分

//bad
if(user.id == 10){
    if(user.name != ""){
        if(user.email === "email"){
            //do something
        }
    }
}

//good
if(user.id == 10 && user.name != "" && user.email === "email"){
    //do something
}

//good
if(user.id == 10) return;
if(user.name != "") return;
if(user.email === "email") return;
複製程式碼

5.多個變數定義，寫一個var即可，遵循的原則，被賦值的寫在前面，只是進行宣告的寫在後面。

//bad
var a = "aa";
var b = "bb";
var c = "cc";
var d;

//good
var a = "aa",
    b = "bb",
    c = "cc",
    d
複製程式碼

6.儘可能的減少DOM操作，將DOM操作放在迴圈體之外，資料處理好後，只執行一次DOM操作即可。

//bad
for (var i = 0; i < 100; i++){
    str += str;
    document.getElementById("box").innerHtml = str;
}

//good
for (var i = 0; i < 100; i++) {
    str += str;
}
document.getElementById("box").innerHtml = str;
複製程式碼

7.避免使用 連等號 宣告賦值變數。js基礎好點的同學都知道，這裡存在著一個坑： b 會被宣告為全域性變數，意思就是在 test() 方法之外b也是可以被訪問到的。 全域性變數是不推薦使用的，容易汙染環境。

//bad
function test() {
    var a = b = 1;
    console.log(a);
}

//good
function test() {
    var a = 1,
    b = 1;

    console.log(a);
}
複製程式碼

8.typeof 運算是用來檢查資料型別的（常用來檢查js中的基礎型別），它返回的是一個字串（並且始終為小寫），所以第一個始終為false。 檢查js中的引用型別要用 instanceof 運算， 如：

`var arr = [];  if(arr instanceof Array){}`, 
複製程式碼

但 Function 型別比較特別，也可以用 typeof 來進行判斷。

//bad
if (typeof str === "String") {

}

//good
if (typeof str === "string") {

}
複製程式碼

9.兩個方法實現同樣的功能，但第二個優雅得多，效能上也比第一個要好。當對字串進行迴圈操作，如：查詢、替換。 首先考慮的應該是使用 正則，不應該是迴圈遍歷。

//(bad) 格式化字串 fontSize => font-size
function stringFormat(str) {
    var strArr = str.split(''),
        len = strArr.length,
        i = 0;

    for (; i < len; i++) {
        if(/^[A-Z]$/.test(strArr[i])) {
            strArr[i] = "-" + strArr[i].toLowerCase();
        }
    }

    return strArr.join('');
}

//(good) 格式化字串 fontSize => font-size
function stringFormat(str) {
    return (str.replace(/([a-z])(A-Z)/g, "$1-$2")).toLowerCase();
}
複製程式碼

10.當一個方法接收的引數過多的時候，可以考慮將其封裝成一個json物件， 這樣簡單得多。

//bad
function regist(userName, userPwd, userEmail, userPhone) {
    //do something...
}

//good
function regist(user) {
    //do something
}
複製程式碼

11.使用三元運算表示式進行if…else的判斷

//bad
if (age > 20) {
    value = "aa";
} else {
    value = "bb";
}

//good
value = age > 20 ? "aa" : "bb";
複製程式碼

相關文章