24 個 Javascript 程式碼優化技巧

阿新 • • 發佈：2021-06-28

1. if 多條件判斷

在if多條件判斷的情況下建議使用includes方法。

const day = "星期二";
if (day === "星期二" || day === "星期三" || day === "星期四") {
    console.log(day);
}

// 優化
if (["星期二", "星期三", "星期四"].includes(day)) {
    console.log(day);
}

2. if...else

當有不包含複雜邏輯的使用if...else條件時，可以三元運算子來簡化。

// 優化前
let test;
if (x > 100) {
    test  
= true;
} else {
    test = false;
}
// 優化後
let test = x > 10 ? true : false;
// 或簡寫如下
let test = x > 10;

當有巢狀條件時，可以採用下面的方式：

const x = 300;
const test2 =
    x > 100 ? "greater 100" : x < 50 ? "less 50" : "between 50 and 100";
console.log(test2); // "greater than 100"

3. 變數宣告

當要宣告兩個具有相同值或相同型別的變數時，可以使用簡寫方式。

// 優化前
let number1;
let number2 = 1;

// 優化後
let number1, number2 = 1;

4. null、undefined和空值檢查

當建立新的變數或者除錯API提供的資料時，需要檢查資料是否為null、undefined和空值。Javascript 新語法空值合併運算子??確實有一個很好的快捷方式來實現這個功能。

// 優化前
if (test1 !== null || test1 !== undefined || test1 !== "") {
    const test2 = test1;
}
// 優化後
const test2 = test1 || "";
 
// 新語法
const foo = null ?? "default string";
console.log(foo);

5. null或者undefined檢查並設定預設值

const test1 = null;
const test2 = test1 || "";

const test3 = undefined;
const test4 = test3 || "";

// 使用空值合併運算子
const test = null ?? "default";

6. 宣告多個變數並賦值

當處理多個變數並進行賦值的時候，使用“解構”可以使得程式碼更加友好。

// 優化前
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;
// 優化後
let [test1, test2, test3] = [1, 2, 3];

7. 賦值運算子

在專案開發中，要處理大量的算術運算子，很多方式可以進行簡寫。

// 優化前
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 10;
// 優化後
test1++;
test2--;
test3 *= 10;

8. if 存在的簡寫

// 優化前
if (test1 === true) or if (test1 !== "") or if (test1 !== null){

}
// 優化後
if (test1){

}

9. if 執行函式

如果判斷一個條件滿足就執行某個函式，則可以利用和運算子&&。

// 優化前
if (test1) {
    callMethod();
}
// 優化後
test1 && callMethod();

10.for迴圈

// 優化前
for (var i = 0; i < testData.length; i++)

// 優化後
for (let i in testData) or  for (let i of testData)

如果是陣列，可以使用foreach。

[11, 24, 32].forEach((element, index, array) => {
    console.log("test[" + index + "] = " + element);
});

11.條件返回

// 優化前
let test;
function callMe(val) {
    console.log(val);
}

function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return callMe("test");
    }
}
var data = checkReturn();
console.log(data);
// 優化後
function checkReturn() {
    return test || callMe("test");
}

12. 箭頭函式

在專案中還是建議多用箭頭函式，簡潔而且可以避免this的問題。

// 優化前
function add(a, b) {
    return a + b;
}
// 優化後
const add = (a, b) => a + b;

function callMe(name) {
    console.log("Hello", name);
}
// 箭頭函式的簡寫
callMe = (name) => console.log("Hello", name);

13.條件呼叫

// 優化前
function test1(title) {
    console.log(title);
}
function test2(title) {
    console.log("我的名稱是：" + title);
}
var test3 = 1;
var title = "DevPoint";
if (test3 === 1) {
    test1(title);
} else {
    test2(title);
}

// 優化後
(test3 === 1 ? test1 : test2)(title);

14.switch

優化的方式可以將條件儲存在鍵值物件中，根據條件呼叫。

// 優化前
switch (data) {
    case 1:
        test1();
        break;

    case 2:
        test2();
        break;

    case 3:
        test();
        break;
}

// 優化後
var data = {
    1: test1,
    2: test2,
    3: test,
};

data[something] && data[something]();

15. 隱式返回

使用箭頭函式，可以直接返回值，而不必使用 return 語句。

// 優化前
function calculate(diameter) {
    return Math.PI * diameter;
}
// 優化後
const calculate = (diameter) => Math.PI * diameter;

16.十進位制數值指數優化

// 優化前
for (let i = 0; i < 10000; i++) {}

// 優化後
for (let i = 0; i < 1e4; i++) {}

17.引數預設值

// 優化前
function add(test1, test2) {
    if (test1 === undefined) {
        test1 = 1;
    }
    if (test2 === undefined) {
        test2 = 2;
    }
    return test1 + test2;
}
// 優化後
add = (test1 = 1, test2 = 2) => test1 + test2;
add();

18. `...`運算子

展開運算子...是一個 es6 / es2015 特性，它提供了一種非常方便的方式來執行淺拷貝，這與 Object.assign()的功能相同。

// 優化前
const data = [1, 2, 3];
const test = [4, 5, 6].concat(data);
// 優化後
const data = [1, 2, 3];
const test = [4, 5, 6, ...data];


// 陣列物件淺拷貝
const map1 = {
        title: "DevPoint",
    },
    map2 = {
        info: "Develop",
    };
const newMap = { ...map1, ...map2 };
console.log(newMap); // { title: 'DevPoint', info: 'Develop' }
const test1 = [1, 2, 3];
const test2 = [...test1];

19.模板字串

對於拼接字串很實用，可以更加友好。

// 優化前
const welcome = "Hi " + test1 + " " + test2 + ".";
// 優化後
const welcome = `Hi ${test1} ${test2}`;

多行字串的拼接。

// 優化前
const data =
    "abc abc abc abc abc abc\n\t" + "test test,test test test test\n\t";
// 優化後
const data = `abc abc abc abc abc abc
         test test,test test test test`;

20.物件屬性賦值

let test1 = "a";
let test2 = "b";
// 優化前
let obj = { test1: test1, test2: test2 };
// 優化後
let obj = { test1, test2 };

21.字串轉為數字

// 優化前
let test1 = parseInt("123");
let test2 = parseFloat("12.3");
// 優化後
let test1 = +"123";
let test2 = +"12.3";

22. 解構變數

// 優化前
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;
// 優化後
const { test1, test2, test3 } = this.data;

23.Array.find

當確實有一個物件陣列並且我們想要根據物件屬性查詢特定物件時，find方法確實很有用。

const data = [
    {
        type: "test1",
        name: "abc",
    },
    {
        type: "test2",
        name: "cde",
    },
    {
        type: "test1",
        name: "fgh",
    },
];
function findtest1(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === "test1" && data[i].name === name) {
            return data[i];
        }
    }
}
// 優化後
filteredData = data.find(
    (data) => data.type === "test1" && data.name === "fgh"
);
console.log(filteredData); // { type: 'test1', name: 'fgh' }

24.條件執行

如果有程式碼來檢查型別，並且基於型別需要呼叫不同的方法，可以選擇使用多個else if或進行切換，可以使用物件鍵值優化。

// 優化前
if (type === "test1") {
    test1();
} else if (type === "test2") {
    test2();
} else if (type === "test3") {
    test3();
} else if (type === "test4") {
    test4();
} else {
    throw new Error("Invalid value " + type);
}
// 優化後
var types = {
    test1: test1,
    test2: test2,
    test3: test3,
    test4: test4,
};

var func = types[type];
!func && throw new Error("Invalid value " + type);
func();