5 個 JavaScript 程式碼優化技巧

語言: CN / TW / HK

在本文中,將介紹 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);

總結

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