JS 代码生成器
挑选常用 JS / TS 片段一键生成可运行代码：随机数、UUID、日期格式化、深拷贝、防抖节流、数组去重分组、对象扁平化、URL 参数、本地存储、fetch 封装、表单与正则校验、分页、金额格式化、时间戳转换，全部带中文注释。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
// 生成 [min, max] 之间的随机整数（含两端）
function randomInt(min: number, max: number): number {
if (max < min) {
throw new RangeError('max 不能小于 min');
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成 [min, max) 之间的随机浮点数
function randomFloat(min: number, max: number): number {
return Math.random() * (max - min) + min;
}
console.log(randomInt(1, 100));
console.log(randomFloat(0, 1).toFixed(2));直接复制到项目里即可运行，注释可按需去掉。
这个工具能做什么
- 写前端时直接抄一段能跑的代码：防抖、节流、深拷贝、数组去重分组、分页这些高频片段不用再翻旧项目。
- 给团队统一代码风格：日期格式化、金额格式化、本地存储封装、fetch 封装都带中文注释和错误兜底，可以直接进工具函数库。
- 需要 TypeScript 版本时勾选「TypeScript」，同一份逻辑会补上类型注解与泛型，省去手写类型的功夫。
- 面试或写文档前快速找参考实现：17 个片段覆盖随机数、UUID、正则校验、时间戳转换等常见需求。
示例
输入
片段：数组去重分组；选项：TypeScript 关、保留注释开
输出
// 数组去重：普通值用 Set，对象数组按字段去重
function unique(list) {
return [...new Set(list)];
}
function uniqueBy(list, key) {
const seen = new Set();
return list.filter((item) => {
const value = item[key];
if (seen.has(value)) {
return false;
}
seen.add(value);
return true;
});
}
console.log(unique([1, 2, 2, 3]));
console.log(uniqueBy([{ id: 1 }, { id: 1 }, { id: 2 }], 'id'));勾选 TypeScript 后同一段会变成 function unique<T>(list: T[]): T[] 与 uniqueBy<T, K extends keyof T>(list: T[], key: K): T[]；关掉「保留注释」则去掉所有整行注释并压掉多余空行。
常见问题
生成的代码能直接用吗？
可以直接跑，每段都以 console.log 调用结尾，粘到浏览器控制台或 Node 里就有输出。但它们是通用实现，没针对你的业务做边界处理，进生产前请按项目规范补测试和类型。
为什么有些片段勾选 TypeScript 后变化很大？
防抖、节流、本地存储、fetch 封装、表单校验这类片段的 JS 与 TS 结构差别较大，模板里各自准备了一份 TS 版本；其余片段只是补上类型注解和泛型，逻辑完全一致。
有测试或框架相关的片段吗？
没有。这里只收录与框架无关的通用工具函数，不含 React/Vue 组件、也不含 Jest/Vitest 用例。如果需要框架写法，把这里的函数直接搬进去当工具函数用即可。
防抖和节流该选哪个？
防抖是「停下来才执行」：输入框搜索、窗口 resize 结束后请求接口用它；节流是「固定间隔最多执行一次」：滚动监听、拖拽、鼠标移动用它。两个片段都能生成，注意 TS 版本用的是 window.setTimeout，在 Node 环境需要改成 setTimeout。
为什么只有 17 个片段？
只挑了日常复用率最高、容易写错或容易踩坑的那些，比如金额用分转元避免浮点误差、时间戳自动识别 10 位秒级。想加片段可以直接改源码里的模板表，生成逻辑会自动带上。
关键词：js 代码生成javascript 代码typescript 片段code generator防抖节流debouncethrottle深拷贝deep clone代码片段snippet