一文總結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 ]

關於解構運算符，如有興趣可以參考：

• JavaScript 解構賦值5 個常見場景與實例
• 再談JavaScript 中的物件解構

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 <h3 id="使用IIFE-保護資料隱私">5. 使用IIFE 保護資料隱私</h3><p>IIFE 是<code>Immediately Invoked Function Expression</code>（立即呼叫函數表達式）的縮寫，它是一個在定義時就會立即執行的JavaScript 函數，並為變數建立私有作用域。這對於保護資料隱私很有用，因為它確保了在IIFE中聲明的變數不能從外部存取。 </p><p>可以使用這種格式為應用程式建立一個包，將程式碼邏輯放入命名空間以避免變數衝突以保持程式碼私有，而這個私有套件適合以<code><script></script></code>標籤方式引入到頁面。通常可以看到WEB統計程式碼是以這種方式引入頁面。 </p><pre class="brush:php;toolbar:false">(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);

總結

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

推薦學習：《JavaScript影片教學》

#

以上是一文總結5個JavaScript程式碼優化技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！