一文總結5個JavaScript程式碼優化技巧

在本文中，將介紹 5 個程式碼優化的技巧，有助於編寫更高效、更優雅的程式碼。這些技巧包括使用擴充套件運運算元簡化程式碼到使用 async/await 處理非同步程式碼等。

1. 使用擴充套件運運算元解構物件和陣列

擴充套件運運算元由三個點 ... 表示，可用於物件和陣列的解構。對於物件，它允許使用另一個物件的屬性子集輕鬆建立一個新物件。

const numbersObj = { a: 1, b: 2, c: 3 };
const newObject = { ...numbersObj, b: 4 };
console.log(newObject); // { a: 1, b: 4, c: 3 }
登入後複製

對於陣列，使用擴充套件運運算元可以輕鬆提取和運算元組元素。

const numbersArray = [1, 2, 3, 4, 5];
const newArray = [...numbersArray.slice(0, 2), 6, ...numbersArray.slice(4)];
console.log(newArray); // [ 1, 2, 6, 5 ]
登入後複製

關於解構運運算元，如有興趣可以參閱：

2. 使用 async/await 簡化非同步程式碼

async/await 是一種簡化 JavaScript 中非同步程式碼處理的方法。它允許以一種看起來和行為都像同步程式碼的方式編寫非同步程式碼。

async function getData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    console.log(data);
}
getData();
登入後複製

3. 使用代理物件進行高階屬性存取

JavaScript 中的 Proxy 物件允許攔截和自定義屬性存取。這對於高階資料驗證、紀錄檔記錄等非常有用。

Proxy 物件用於建立一個物件的代理，從而實現基本操作的攔截和自定義（如屬性查詢、賦值、列舉、函數呼叫等）。

const target = {};
const handler = {
    get: (target, prop) => {
        console.log(`獲取屬性：${prop}`);
        return target[prop];
    },
    set: (target, prop, value) => {
        console.log(`屬性 ${prop} 更新為 ${value}`);
        target[prop] = value;
    },
};
const proxy = new Proxy(target, handler);

proxy.name = "DevPoint";
console.log(proxy.name);
登入後複製

4. 使用三元運運算元優化條件邏輯

三元運運算元是在 JavaScript 中編寫簡單的 if-else 語句的一種簡寫方式。這是一種表達條件及其相應結果的簡潔有效的方式。

const x = 5;
const result = x > 0 ? "positive" : "negative";
console.log(result); // positive
登入後複製

它也可以巢狀用於更復雜的條件。

const age = 30;
const result =
    age < 18 ? "未成年人" : age >= 18 && age < 60 ? "成年人" : "老年人";
console.log(result); // 成年人
登入後複製

5. 使用 IIFE 保護資料隱私

IIFE 是 Immediately Invoked Function Expression（立即呼叫函數表示式）的縮寫，它是一個在定義時就會立即執行的 JavaScript 函數，併為變數建立私有作用域。這對於保護資料隱私很有用，因為它確保了在IIFE中宣告的變數不能從外部存取。

可以使用這種格式為應用程式建立一個包，將程式碼邏輯放入名稱空間以避免變數衝突以保持程式碼私有，而這個私有包適合以 <script> 標籤方式引入到頁面。通常可以看到WEB統計程式碼是以這種方式引入頁面。

(function () {
    let key = "這是一個安全金鑰";
})();
console.log(key); // ReferenceError: key is not defined
登入後複製

IIFE 真正擅長的是建立作用域的能力，IIFE 中的任何變數對外界都是不可見的。減少全域性變數的產生，同時也避免了變數名稱衝突的機會。

來看一個例子：

(function initGame() {
    // 無法在 IIFE 外部存取的私有變數
    var lives;
    var player;

    init();

    // 在 IIFE 之外無法存取的私有函數
    function init() {
        lives = 5;
        player = "devpoint";
    }
})();
登入後複製

在這個例子中宣告了兩個變數，都是私有的，也就是說，只對 IIFE 本身有效。IIFE 以外的任何人都無法存取它。此外，還有一個 init 的方法，外部也不可以存取。

看過jQuery原始碼的話，對下面這段程式碼應該很熟悉：

(function ($, global, document) {
    // 對 jQuery 使用 $，對 window 使用 global
})(jQuery, window, document);
登入後複製

總結

通過收集這些編碼小技巧，提高編寫優雅且可維護程式碼的能力。

推薦學習：《》

以上就是一文總結5個JavaScript程式碼優化技巧的詳細內容，更多請關注TW511.COM其它相關文章！