使用 ES6+ 特性（如 async/await、解构、展开运算符和函数式编程模式）编写更简洁、更易维护的 JavaScript 代码。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“modern-javascript-patterns”。 将此回调转换为 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”。 对此代码应用解构: 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
文件结构