運用 ES6+ 功能（如 async/await、解構、展開運算子和函數式程式設計模式）撰寫更簡潔、更易維護的 JavaScript。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「modern-javascript-patterns」。 Convert this callback to async/await: function getData(id, callback) { fetch('/api/' + id) .then(res => res.json()) .then(data => callback(null, data)) .catch(err => callback(err)); }
預期結果:
重構後的 async/await 版本：
async function getData(id) {
try {
const res = await fetch(`/api/${id}`);
const data = await res.json();
return data;
} catch (err) {
throw err;
}
}
優點：
- 更簡潔、類同步的程式碼
- 使用 try/catch 進行更好的錯誤處理
- 更容易偵錯和維護
正在使用「modern-javascript-patterns」。 Apply destructuring to this code: const user = { name: 'John', age: 30, address: { city: 'NYC' } }; const name = user.name; const city = user.address.city;
預期結果:
使用解構重構：
const user = { name: 'John', age: 30, address: { city: 'NYC' } };
const { name, address: { city } } = user;
或使用重新命名：
const { name: userName, address: { city: userCity } } = user;
安全審計
安全All 89 static findings are FALSE POSITIVES. The scanner misinterprets JavaScript code examples in markdown documentation as security risks. Backticks in code blocks are not shell commands. References to fetch() and dynamic import() are legitimate ES6+ patterns being taught. This is a safe educational skill about modern JavaScript patterns.
高風險問題 (1)
中風險問題 (2)
低風險問題 (2)
品質評分
你能建構什麼
舊版程式碼現代化
將較舊的基於回呼的 JavaScript 程式碼重構為使用 Promises 和 async/await，以提升可讀性和錯誤處理。
學習現代 JavaScript
理解並應用 ES6+ 功能（如解構、展開運算子和模組）以撰寫更具表達力的程式碼。
程式碼審查改進
在程式碼審查期間應用現代 JavaScript 模式，以建議更簡潔、更易維護的實作。
試試這些提示
將此基於回呼的 JavaScript 函式轉換為使用 async/await 語法。顯示轉換前後的程式碼。 [在此插入回呼程式碼]
重構此 JavaScript 程式碼以使用物件和陣列解構。使程式碼更簡潔且易讀。 [在此插入具有巢狀屬性或陣列的程式碼]
將此命令式 JavaScript 程式碼轉換為使用函數式程式設計（map、filter 和 reduce）。顯示可鏈結的管線方法。 [在此插入基於迴圈的轉換程式碼]
展示如何使用動態 import() 為此功能模組實作延遲載入。包含錯誤處理和條件式載入邏輯。
最佳實務
- 預設使用 const，僅在需要重新指派時使用 let
- 優先對回呼使用箭頭函式以避免 this 繫結問題
- 使用 async/await 而非 Promise 鏈以提升可讀性
避免
- 使用 var 而非 const/let - 缺乏區塊範圍
- 具有巢狀匿名函式的回呼地獄
- 直接變更物件而非使用不可變模式
常見問題
let 和 const 有什麼區別？
何時應使用 async/await 而非 Promises？
JavaScript 中的解構是什麼？
箭頭函式有什麼優點？
展開運算子用於什麼？
動態匯入如何提升效能？
開發者詳情
作者
sickn33授權
MIT
儲存庫
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/modern-javascript-patterns引用
main
檔案結構