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); // Johnconsole.log(age); // 30console.log(hometown); // New Yorkconsole.log(postalCode); // 10001
2. 柯里化
柯里化是將接受多個參數的函數轉換為一系列每個接受單個參數的函數的過程。
這種技術允許你創建更靈活和可重用的函數，這在函數式編程中特別有用，可以大大簡化高度可重用的實用函數的創建，使代碼庫更簡潔、更易于維護。
● 用例
創建可重用和可配置的函數以應用折扣。可以創建一個柯里化函數，而不必為不同的折扣百分比編寫單獨的函數。
const applyDiscount = (discount) => (price) => price - (price * discount / 100);const tenPercentOff = applyDiscount(10);const twentyPercentOff = applyDiscount(20);
console.log(tenPercentOff(100)); // 90console.log(twentyPercentOff(100)); // 80
const applyTax = (taxRate) => (price) => price + (price * taxRate / 100);const applyTenPercentTax = applyTax(10);
console.log(applyTenPercentTax(100)); // 110console.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, JohnproxyUser.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
7. 充分利用控制臺
增強調試信息的可見性和組織性，使診斷和解決問題變得更加容易。正確使用控制臺方法可以通過提供清晰、有條理和詳細的日志來顯著改善調試過程。
● 用例
改進用于調試復雜對象的日志記錄。console.table、console.group 和 console.time 等控制臺方法可以提供更結構化和信息豐富的調試信息。
// Basic loggingconsole.log('Simple log');console.error('This is an error');console.warn('This is a warning');
// Logging tabular dataconst users = [ { name: 'John', age: 30, city: 'New York' }, { name: 'Jane', age: 25, city: 'San Francisco' },];console.table(users);
// Grouping logsconsole.group('User Details');console.log('User 1: John');console.log('User 2: Jane');console.groupEnd();
// Timing code executionconsole.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); // falseconsole.log(clonedObj.b === obj.b); // falseconsole.log(clonedObj.date === obj.date); // falseconsole.log(clonedObj.arr === obj.arr); // falseconsole.log(clonedObj.nestedArr[0] === obj.nestedArr[0]); // false
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>
該文章在 2024/9/27 14:38:39 編輯過
400 186 1886
