歡迎來到高級 JavaScript 的世界！無論您是希望提高技能的經驗豐富的開發人員，還是渴望深入了解 JavaScript 複雜性的愛好者，本部落格旨在啟發和教育您。讓我們探索 20 個高級 JavaScript 技巧，這些技巧不僅可以增強您的編碼能力，還可以在您發現優化程式碼的新穎且令人興奮的方法時給您帶來微笑。
1.解構賦值
解構賦值是一項強大的功能，它允許您將陣列中的值或物件的屬性解包到不同的變數中。這可以讓你的程式碼更具可讀性和簡潔性。
const [first, second] = [10, 20];
const { name, age } = { name: 'Alice', age: 30 };2.預設參數
預設參數可讓您為函數參數設定預設值，使您的函數更加靈活且更易於使用。
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // Output: Hello, Guest!3.模板字串
模板文字提供了一種在字串中嵌入表達式的方法，使字串插值變得輕而易舉。
const name = 'Bob';
console.log(`Hello, ${name}!`);4.箭頭函數
箭頭函數為編寫函數表達式提供了簡潔的語法，並自動將this值綁定到周圍上下文。
const add = (a, b) => a + b;5.擴展運算符和剩餘運算符
擴充運算子（ ... ）允許你將可迭代物件（如陣列）擴展為單一元素，而剩餘運算子可以將多個元素收集到一個陣列中。
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
function sum(...args) {
return args.reduce((acc, val) => acc + val, 0);
}-
Promises 和 Async/Await
Promises 和async/await語法讓非同步程式碼更易於編寫和理解。
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}7.可選鍊式呼叫
可選連結（ ?. ）可讓您安全地存取深層嵌套的屬性，而無需明確檢查每個層級。
const user = { name: 'Alice', address: { city: 'Wonderland' } };
const city = user?.address?.city;8.空值合併
空值合併運算子（ ?? ）在處理null或undefined時提供預設值。
const value = null ?? 'default';
console.log(value); // Output: default9.動態導入
動態導入可讓您按需載入模組，透過分割程式碼來提高效能。
import('./module.js').then(module => {
module.doSomething();
});10.代理物件
代理程式可讓您建立具有自訂行為的物件以執行基本操作（例如，屬性查找、指派）。
const handler = {
get: (obj, prop) => {
if (prop in obj) {
return obj[prop];
} else {
return 'Property not found';
}
}
};
const proxy = new Proxy({ name: 'Alice' }, handler);
console.log(proxy.name); // Output: Alice
console.log(proxy.age); // Output: Property not found11.記憶化
記憶化是一種透過快取結果來優化昂貴函數呼叫的技術。
function memoize(fn) {
const cache = {};
return function (...args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
} else {
const result = fn(...args);
cache[key] = result;
return result;
}
};
}12.柯里化
科里化是一種函數式程式設計技術，其中具有多個參數的函數被轉換為一元函數序列。
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function (...args2) {
return curried.apply(this, args.concat(args2));
};
}
};
}13.高階函數
高階函數是將其他函數作為參數或將其作為結果傳回的函數。
function higherOrder(fn) {
return function (...args) {
console.log('Before function call');
const result = fn(...args);
console.log('After function call');
return result;
};
}14.事件委託
事件委託是一種透過向父元素加入單一事件監聽器來有效處理事件的技術。
document.querySelector('#parent').addEventListener('click', function (event) {
if (event.target.tagName === 'BUTTON') {
console.log('Button clicked:', event.target.textContent);
}
});15.防手震和節流
去抖動和節流是控制函數呼叫速率的技術，可用於最佳化滾動事件或輸入變化等場景的效能。
function debounce(fn, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
function throttle(fn, limit) {
let inThrottle;
return function (...args) {
if (!inThrottle) {
fn(...args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}-
React 中的自訂 Hooks
React 中的自訂鉤子可讓您跨元件封裝和重複使用狀態邏輯。
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = React.useState(() => {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});
const setValue = value => {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
};
return [storedValue, setValue];
}-
Web Workers
Web Workers 可讓您在背景執行緒中執行腳本，從而保持使用者介面回應。
const worker = new Worker('worker.js');
worker.postMessage('Hello, Worker!');
worker.onmessage = function (event) {
console.log('Message from worker:', event.data);
};18.服務人員
Service Worker 可作為網路代理，讓您建立有效的離線體驗並提高效能。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
console.log('Service Worker registered with scope:', registration.scope);
});
}19.交叉口觀察器 API
交叉點觀察者 API 提供了一種非同步觀察目標元素與祖先元素或頂級文件視口交叉點變化的方法。
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is in view:', entry.target);
}
});
});
observer.observe(document.querySelector('#target'));20.自訂元素和影子 DOM
自訂元素和 Shadow DOM 可讓您建立具有封裝樣式和行為的可重複使用元件。
class MyElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>:host { color: blue; }</style><p>Hello, World!</p>`;
}
}
customElements.define('my-element', MyElement);結論
探索這些高級 JavaScript 技巧可以顯著提高您的開發技能，讓您的程式設計之旅更加愉快。無論您是優化效能、提高程式碼可讀性還是建立更動態的使用者體驗，這些技術都提供了豐富的可能性。快樂編碼，願你的 JavaScript 冒險充滿發現和喜悅！ 🎉💻
在 GitHub 上追蹤我：
如果你發現本部落格有幫助，並且想要了解更多高級 JavaScript 技巧和竅門，請隨時在 GitHub 上關注我：
如果您喜歡我的內容並且發現它有用，您可以為我買一杯咖啡來支持我的工作！您的支持幫助我持續分享寶貴的知識。 ☕❤️ buymeacoffee.com/sovannaro
原文出處：https://dev.to/sovannaro/20-advanced-javascript-tricks-for-experienced-developers-44f8
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式