十個你可能不知道的高級 JavaScript 技術

作者：佚名 2025-03-19 09:46:45

JavaScript 是一種功能強大的開發語言，它隱藏了許多可以用來提高開發效率和代碼整潔度的功能。

以下是 10 種你可能不知道的高級 JavaScript 技術，它們可以顯著提高你的編碼技能。

1. 使用別名進行解構

解構允許你將數組中的值或對象的屬性解包為不同的變量。別名允許你在此過程中重命名變量，這在處理來自外部來源（如 API）的數據時特別有用。

用例：從 API 獲取數據時，你想為屬性分配更有意義的名稱，以提高代碼的可讀性和可維護性。

const apiResponse = {
  first_name: 'John',
  user_age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  }
};


const {
  first_name: firstName,
  user_age: age,
  address: {
    city: hometown,
    zip: postalCode
  }
} = apiResponse;


console.log(firstName);  // John
console.log(age);        // 30
console.log(hometown);   // New York
console.log(postalCode); // 10001

為什么要使用它：它使變量名更加不言自明和直觀，從而提高了代碼的可讀性和可維護性。

通過使用別名，可以避免命名沖突并提高代碼清晰度，從而更輕松地處理復雜的數據結構。

2. 柯里化

柯里化是將接受多個參數的函數轉換為一系列每個接受單個參數的函數的過程。這種技術允許你創建更靈活和可重用的函數，這在函數式編程中特別有用。

用例：創建可重用和可配置的函數以應用折扣。可以創建一個柯里化函數，而不必為不同的折扣百分比編寫單獨的函數。

const applyDiscount = (discount) => (price) => price - (price * discount / 100);
const tenPercentOff = applyDiscount(10);
const twentyPercentOff = applyDiscount(20);


console.log(tenPercentOff(100)); // 90
console.log(twentyPercentOff(100)); // 80


const applyTax = (taxRate) => (price) => price + (price * taxRate / 100);
const applyTenPercentTax = applyTax(10);


console.log(applyTenPercentTax(100)); // 110
console.log(applyTenPercentTax(twentyPercentOff(100))); // 88

為什么要使用它：它能夠在函數中預設參數，從而允許編寫更模塊化和可組合的代碼。

這可以大大簡化高度可重用的實用函數的創建，使代碼庫更簡潔、更易于維護。

柯里化在需要部分應用函數或重用具有不同配置的函數的場景中特別有用。

3. 去抖動和節流

去抖動和節流是控制函數執行頻率的技術。它們對于優化事件處理程序和防止可能降低性能的過多函數調用特別有用。

去抖動：

去抖動可確保僅在上次調用函數后經過一定時間后才調用該函數。這對于搜索輸入字段等場景很有用，在這些場景中，如果希望僅在用戶停止輸入后才進行 API 調用。

用例：優化搜索輸入字段以減少 API 調用次數。

這可以防止服務器過載并通過僅在用戶完成輸入后啟動搜索來改善用戶體驗。

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}


const search = debounce((query) => {
  console.log(`Searching for ${query}`);
  // Assume an API call here
}, 300);


document.getElementById('searchInput').addEventListener('input', (event) => {
  search(event.target.value);
});

為何使用它：通過確保僅在用戶停止執行觸發操作后才調用函數，減少不必要的函數調用次數，從而提高性能和用戶體驗。這對于涉及網絡請求或大量計算的操作特別有用。

節流：

節流確保在指定時間段內最多調用一次函數。這對于想要限制函數調用頻率的滾動事件等場景很有用。

用例：優化滾動事件處理以獲得更好的性能。這可以防止瀏覽器因過多的事件調用而過載，從而確保更流暢、響應更快的交互。

function throttle(func, interval) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= interval) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}


const handleScroll = throttle(() => {
  console.log('Scrolled');
  // Assume complex calculations or DOM updates here
}, 300);


window.addEventListener('scroll', handleScroll);

為什么要使用它：通過確保以受控間隔調用函數來防止性能問題，減少瀏覽器負載并提供更好的用戶體驗。節流對于可能頻繁觸發的事件偵聽器特別有用，例如，滾動或調整大小事件。

4. 記憶化

記憶化是一種優化技術，涉及緩存昂貴的函數調用的結果，并在再次出現相同輸入時返回緩存的結果。

這可以顯著提高計算成本高昂的函數的性能，尤其是那些使用相同參數頻繁調用的函數。

用例：提高斐波那契數計算等遞歸函數的性能。如果沒有記憶化，每次調用斐波那契函數都會重復計算相同的值多次，從而導致指數時間復雜度。

const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
};


const fibonacci = memoize((n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});


console.log(fibonacci(40)); // 102334155

為什么要使用它：避免冗余計算，顯著提高具有重復輸入的函數的性能。

記憶化可以將低效的遞歸計算轉換為可管理的線性時間操作，使其成為優化性能密集型任務的必備技術。

5. 代理

代理對象允許您為另一個對象創建代理，該代理可以攔截和重新定義該對象的基本操作，例如屬性查找、賦值、枚舉、函數調用等。

這提供了一種向對象添加自定義行為的強大方法。

用例：實現對對象屬性訪問和賦值的驗證和日志記錄。

例如，您可以強制執行類型約束并記錄訪問嘗試，從而提供更好的控制和調試功能。

const user = {
  name: 'John',
  age: 30
};


const handler = {
  get: (target, prop) => {
    console.log(`Getting ${prop}`);
    return target[prop];
  },
  set: (target, prop, value) => {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    console.log(`Setting ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
};


const proxyUser = new Proxy(user, handler);
console.log(proxyUser.name); // Getting name, John
proxyUser.age = 35; // Setting age to 35
// proxyUser.age = '35'; // Throws TypeError

為什么要使用它：允許對對象操作（例如驗證、日志記錄等）進行自定義行為，從而增強對對象交互的控制。

代理還可用于實現復雜的邏輯，如訪問控制和數據綁定。

這使它們成為管理和擴展對象行為的多功能工具。

6. 生成器

生成器是可以退出并稍后重新進入的函數，在重新進入之間保持其上下文和變量綁定。它們對于實現迭代器和以同步方式處理異步任務非常有用。

用例：實現迭代器以進行自定義對象遍歷。

生成器提供了一種定義自定義迭代行為的簡單方法，使遍歷復雜數據結構變得更簡單。

function* objectEntries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}


const user = { name: 'John', age: 30, city: 'New York' };


for (let [key, value] of objectEntries(user)) {
  console.log(`${key}: ${value}`);
}
// name: John
// age: 30
// city: New York

為什么要使用它：提供強大的工具來實現自定義迭代器并簡化異步工作流。

生成器使處理復雜的迭代邏輯和異步過程變得更加容易，從而產生更易讀和更易于維護的代碼。

它們還可以與 co 等庫一起使用，以更直接、更線性的方式管理異步操作。

7. 充分利用控制臺

用例：改進用于調試復雜對象的日志記錄。console.table、console.group 和 console.time 等控制臺方法可以提供更結構化和信息豐富的調試信息。

// Basic logging
console.log('Simple log');
console.error('This is an error');
console.warn('This is a warning');


// Logging tabular data
const users = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Jane', age: 25, city: 'San Francisco' },
];
console.table(users);


// Grouping logs
console.group('User Details');
console.log('User 1: John');
console.log('User 2: Jane');
console.groupEnd();


// Timing code execution
console.time('Timer');
for (let i = 0; i < 1000000; i++) {
  // Some heavy computation
}
console.timeEnd('Timer');

為什么要使用它：增強調試信息的可見性和組織性，使診斷和解決問題變得更加容易。

正確使用控制臺方法可以通過提供清晰、有條理和詳細的日志來顯著改善調試過程。

8. 使用structuredClone進行結構化克隆

使用新的structuredClone方法深度克隆對象。與傳統的淺層復制不同，結構化克隆會創建對象的深層副本，確保嵌套對象也被復制。

此方法避免了JSON.parse(JSON.stringify(obj))的局限性，它無法處理某些數據類型，如函數、未定義和循環引用。

用例：創建復雜對象的深層副本。當需要復制對象以執行不應更改原始數據的操作時，這很有用。

const obj = {
  a: 1,
  b: { c: 2 },
  date: new Date(),
  arr: [1, 2, 3],
  nestedArr: [{ d: 4 }]
};
const clonedObj = structuredClone(obj);


console.log(clonedObj);
// { a: 1, b: { c: 2 }, date: 2023-06-08T00:00:00.000Z, arr: [1, 2, 3], nestedArr: [{ d: 4 }] }
console.log(clonedObj === obj); // false
console.log(clonedObj.b === obj.b); // false
console.log(clonedObj.date === obj.date); // false
console.log(clonedObj.arr === obj.arr); // false
console.log(clonedObj.nestedArr[0] === obj.nestedArr[0]); // false

為什么要使用它：提供一種內置的、高效的深度克隆對象方法，避免手動深度復制實現的陷阱和復雜性。

與 JSON.parse(JSON.stringify(obj)) 等替代方法相比，此方法更可靠，可以更好地處理復雜的數據結構。

9. 自調用函數

自調用函數，也稱為立即調用函數表達式 (IIFE)，是在創建時自動執行的函數。它們對于封裝代碼以避免污染全局范圍很有用，這對于維護干凈和模塊化的代碼至關重要。

用例：封裝代碼以避免污染全局范圍。此技術在較舊的 JavaScript 環境中特別有用，在這些環境中，塊作用域（let 和 const）不可用，或者當需要立即執行初始化邏輯時。

(function() {
  const privateVar = 'This is private';
  console.log('Self-invoking function runs immediately');
  // Initialization code
})();


// Private variable can't be accessed from outside
// console.log(privateVar); // ReferenceError: privateVar is not defined

為什么要使用它：通過避免全局變量并執行初始化代碼而不在全局范圍內留下痕跡，有助于維護干凈的代碼。

這種方法可以防止大型代碼庫中的沖突，并確保更好地封裝功能，從而提高代碼的可維護性并減少副作用。

10. 標記模板文字

標記模板文字允許你自定義模板文字的處理方式。它們對于創建專用模板很有用，例如用于國際化、清理 HTML 或生成動態 SQL 查詢。

用例：清理 HTML 模板中的用戶輸入以防止 XSS 攻擊。此技術可確保用戶生成的內容安全地插入 DOM 中，而不會執行任何惡意腳本。

function sanitize(strings, ...values) {
  return strings.reduce((result, string, i) => {
    let value = values[i - 1];
    if (typeof value === 'string') {
      value = value.replace(/&/g, '&')
                   .replace(/</g, '<')
                   .replace(/>/g, '>')
                   .replace(/"/g, '"')
                   .replace(/'/g, ''');
    }
    return result + value + string;
  });
}


const userInput = '<script>alert("xss")</script>';
const message = sanitize`User input: ${userInput}`;
console.log(message); // User input: <script>alert("xss")</script>

為什么要使用它：提供一種強大的機制來控制和自定義模板文字的輸出，從而實現更安全、更靈活的模板創建。

標記模板文字可用于強制執行安全性、格式化字符串和生成動態內容，從而增強代碼的穩健性和多功能性。

結論

JavaScript 是一種功能豐富的語言，可以幫助你編寫更干凈、更高效的代碼。通過將這些高級技術融入到你的開發實踐中，可以提高工作效率并增強代碼的可讀性。

責任編輯：華軒來源： web前端開發