网上搜"JS代码大全"出来的页面，大部分是2009年到2015年之间的旧文章，代码里充斥着IE6兼容判断、Flash嵌入、document.write和ActiveXObject，放到2026年的浏览器里要么跑不起来要么直接报错。30-seconds-of-code在GitHub上12.8万星标、700多篇代码文章按JavaScript、CSS、React Hooks、Node.js、Git和算法六大分类整理，每个片段30秒能看懂、零依赖直接复制就能用。awesome-javascript-cn整理了从包管理器到MVC框架再到数据可视化在内的十几个分类几百个项目。搜"JS代码大全"不如直接去这两个地方按分类找——一个管代码片段随手抄，一个管技术选型找轮子
JavaScript已经发展了快30年，网上流传的"代码大全"类文章里积压了大量过时代码。IE兼容判断、Flash操作、用var声明变量、回调地狱式Ajax——这些东西在2026年不仅没用，抄过来用反而会给项目埋雷。找JS代码资源的核心不是搜到多少条，是搜到的代码写于哪一年。
2026年找JS代码资源，三个免费开源仓库覆盖了日常开发90%的需求。一个管"这段代码怎么写"，一个管"这个功能用什么库"，一个管"写完的代码有没有坑"30-seconds-of-code 12.8万星标，700+代码片段零依赖复制即用。awesome-javascript-cn 7800星标，十几大类几百个项目帮你做技术选型。GitHub热门仓库里的现代JS片段远比搜索引擎前三页那些2015年的旧代码靠谱
第一站：30-seconds-of-code，写代码时随手查的代码片段库
这个仓库的核心理念是"每个代码片段30秒内能看懂"。分类覆盖JavaScript、CSS、React Hooks、Node.js、JavaScript算法、Git操作和面试题，总共700多篇文章。全部原生实现，不依赖Lodash、Dayjs等第三方库，复制到项目里就能用。
以下是日常开发中使用频率最高的几类片段：
数组操作（最多人查的一类）
数组去重
const uniqueArr = arr => [...new Set(arr)];用Set去重后展开回数组，一行搞定。但注意Set去重只对基本类型有效，对象数组需要按字段去重。
对象数组按字段去重
const uniqueByKey = (arr, key) => [...new Map(arr.map(item => [item[key], item])).values()];Map的key唯一性保证按指定字段去重，保留最后出现的记录。接口返回数据去重最常用的片段。
移除数组中的所有假值（0、null、undefined、false、""、NaN）
const removeFalsy = arr => arr.filter(Boolean);Fisher-Yates洗牌算法（随机打乱数组）
const shuffle = ([...arr]) => { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; };比Array.sort(() => Math.random() - 0.5)公平得多，后者产生的排序结果不是均匀分布。
字符串处理（表单和展示页的高频需求）
从URL中提取域名
const getDomain = (url = '') => { try { return new URL(url).hostname; } catch { return ''; } };用原生URL构造函数解析，比正则表达式可靠得多。正则匹配URL在各种边界情况下容易漏。
移除HTML标签（富文本提取纯文本）
const stripHtml = (html = '') => html.replace(/<[^>]*>/g, '');一键复制到剪贴板
const copyText = async (text = '') => { try { await navigator.clipboard.writeText(text); return true; } catch { return false; } };2026年不需要再用document.execCommand('copy')了，clipboard API全面兼容。
日期时间（最容易写出bug的一类）
判断一个日期是不是今天
const isToday = (date) => { const today = new Date(); return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear(); };只比较年月日三个字段，避开时区和时间戳的坑。用getTime()比较会因为毫秒差异误判。
秒数转HH:MM:SS格式
const secToTime = (s = 0) => [Math.floor(s / 3600), Math.floor(s / 60) % 60, s % 60].map(v => String(v).padStart(2, '0')).join(':');浏览器操作（DOM和BOM的高频操作）
平滑滚动到页面顶部
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });生成全局唯一UUID
const getUUID = () => crypto.randomUUID();2026年所有主流浏览器都原生支持crypto.randomUUID()，不需要引入uuid库。
异步延迟等待
const wait = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));// 使用：await wait(2000);第二站：awesome-javascript-cn，技术选型时查"用什么库"
30-seconds-of-code管的是"怎么写"，awesome-javascript-cn管的是"用什么"。这个仓库按十几个维度分类整理了JavaScript生态的几百个开源项目，7800个星标，每个项目附带简短的功能说明。做技术选型时对着分类扫一遍，比在搜索引擎里一个一个问题搜效率高得多。
以下是几个最常用的分类和里面的代表性项目：
| 分类 | 代表性项目 | 什么时候用到 |
|---|---|---|
| 包管理器 | npm / yarn / pnpm | pnpm磁盘利用率最高，monorepo项目首选 |
| 打包工具 | webpack / Rollup / Vite / Parcel | 新项目首选Vite，库打包首选Rollup |
| 测试框架 | Jest / Mocha / Cypress / Playwright | 单元测试Jest，E2E测试Playwright |
| MVC框架 | React / Vue / Angular / Svelte | Svelte编译时框架，打包体积最小 |
| 数据可视化 | D3.js / ECharts / Chart.js / Three.js | 图表用ECharts，3D用Three.js |
| 日期处理 | date-fns / dayjs / luxon | dayjs 2KB替代moment.js，date-fns函数式按需引入 |
| 函数式编程 | lodash / ramda / immutable.js | lodash按需引入，不要整个库import |
| 富文本编辑器 | Quill / TinyMCE / Draft.js / Tiptap | Tiptap基于ProseMirror，Vue/React双支持 |
| 静态站点生成 | Gatsby / Gridsome / Docusaurus | 文档站用Docusaurus，内容站用Gatsby |
| 机器学习 | TensorFlow.js / Brain.js / ml5.js | 浏览器端推理用TensorFlow.js |
第三站：搞清楚哪些代码抄过来会翻车
抄来的代码直接用，最容易出问题的是三类场景：闭包陷阱、内存泄漏、this指向错误。
翻车一：循环里用var声明变量，所有回调拿到的是同一个值
for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i), 100); } 输出5次5，不是0、1、2、3、4。原因是var声明的变量在函数作用域内共享同一个引用，事件循环导致回调执行时循环已结束。用let声明变量或使用IIFE创建独立作用域可以解决。这是90%的中级开发者踩过的坑。
翻车二：setInterval忘记clearInterval，页面开着三天后内存爆了
用setInterval做轮询、倒计时、实时刷新，但在组件销毁或页面离开时没有调用clearInterval。定时器持续引用DOM元素和闭包变量，GC无法回收，内存占用随时间线性增长。长时间运行的SPA页面尤其容易触发这个问题。解决方案：在useEffect的return里clearInterval（React），或在beforeDestroy里清除（Vue），或使用setTimeout递归替代setInterval。
翻车三：事件监听器添加了没移除，每切换一次路由就多挂一个
window.addEventListener('scroll', handler)加了，但在组件卸载时没有对应的removeEventListener。用户每次切换页面再回来，scroll事件上就多一个监听器。重复10次之后同一个scroll事件触发10个回调，页面响应越来越慢。所有addEventListener必须配对removeEventListener，React里放在useEffect的return清理函数里。
翻车四：闭包里的缓存对象无限增长，忘了设上限和过期机制
用闭包实现了一个缓存函数，每次计算结果都存在闭包变量里。逻辑上没问题，但缓存对象没有上限、没有过期时间，数据只增不减。一个长期运行的Node服务用这种缓存，内存占用几个月涨到几个G。解决方案：设置LRU缓存策略限制最大条目数，或使用WeakMap让不用的数据能被GC自动回收。
翻车五：普通函数里的this在回调中丢失，指向了全局或undefined
obj.method作为回调传给另一个函数，method内部的this不再指向obj。原因是JS中this是动态绑定的——函数的this取决于调用方式而非定义位置。解决方案：用箭头函数自动捕获外层this，或者在传递回调时用.bind(obj)显式绑定。
2026年搜JS代码的五个高效渠道
- 写代码时随手查片段：30-seconds-of-code（12.8万星标），JavaScript/CSS/React/Node/Git/算法六大分类，零依赖直接复制
- 技术选型时找轮子：awesome-javascript-cn（7800星标），包管理/框架/测试/可视化/编辑器等十几个分类
- 查API文档：MDN Web Docs，JavaScript标准库最权威的文档，每个API都有浏览器兼容性表格
- 找具体问题的解决方案：Stack Overflow + 按时间排序，优先看2024年以后的回答，避免踩ES5时代的旧方案
- 看一个库的生态和质量：GitHub上的npm trends比较同类库的下载量、Star数、issue活跃度，以及Bundlephobia查打包体积
2026年写JavaScript，从搜索引擎前三页复制代码的风险已经很高了。那些页面里埋着大量2009-2018年的过时代码：var声明、XMLHttpRequest、document.write、ActiveXObject、callback hell——这些代码在今天的浏览器里要么不推荐使用、要么有更好的替代方案、要么直接不兼容。30-seconds-of-code和awesome-javascript-cn这两个仓库的存在，让"JS代码大全"这件事从"搜到一堆不知道能不能用的旧代码"变成了"去对的地方拿对的代码"。代码片段管怎么写，资源清单管用什么库，MDN管API怎么用，三者搭配比任何搜索引擎都靠谱。
