Coding 题Coding problems
一道一道写One problem at a time
全站 25 道成型的 coding 题都在这儿。题面、需求、参考答案全部引用原来那一节，不是另抄一份。其中 21 道能直接在浏览器里写完并跑测试。All 25 coding problems, pulled from the lessons rather than copied. 21 of them run in the browser.
0 / 25道打过勾ticked done
只有你自己打勾才会加。不做自动判定 —— 测试绿了不等于你不看答案也能写出来。Only your own tick counts. Green tests do not prove you could write it again from scratch.先读题，别先看答案Read the problem before the answer
每道题的页面默认只有题面 —— 工作区要点一下才开，讲解和答案在门后面。 这个顺序是故意的：先自己卡住一会儿，后面看讲解才有用。Each page shows only the problem by default — the workspace opens on a click, and the walkthrough and answer sit behind gates. That order is deliberate: getting stuck for a while first is what makes the walkthrough worth reading.
沙箱有两档。第一遍用带脚手架学会；第二遍点空白重来，实现文件全清空，只留测试 —— 那一遍才算验收。The sandbox has two modes. Learn it the first time with the scaffold; the second time hit start blank — every implementation file is emptied and only the tests remain. That pass is the one that counts.
题目Problems
筛出 25 道。25 of 25 problems.- Todo List
- 计时器（useEffect 清理函数）Timer (useEffect cleanup)
- fetch 取数：loading、error 与竞态Fetching data: loading, error and race conditions
- 递归评论树 + 树形不可变更新Recursive comment tree, updated without changing the original
- 主题切换（Context + value 记忆化）Theme switch (Context plus a memoised value)
- 星级评分（hover 预览 + 受控双模式）Star rating (hover preview, controlled and uncontrolled)
- 写一个自定义 hook：useLocalStorageWrite a custom hook: useLocalStorage
- Kanban 看板：一次改两个数组Kanban board: changing two arrays at once
- Tabs 组件（只用一个 state）Tabs component (one piece of state only)
- 播放器（useRef 操作 DOM）Media player (touching the DOM with useRef)
- Dropdown：点外面要关掉Dropdown: close it on an outside click
- Redux Toolkit 版 TodoTodo with Redux Toolkit
- Cab Booking（Context 版）Cab Booking (Context version)
- Notes Manager 增删改（React 考试 Q1）Notes Manager: add, edit and delete (React exam Q1)
- 带并发上限的异步任务调度器（Q2）Async task scheduler with a concurrency limit (Q2)
- 手写 debounce（带 cancel）Write debounce yourself (with cancel)
- 手写 throttle（leading + trailing）Write throttle yourself (leading and trailing)
- 手写 deepClone（防循环）Write deepClone yourself (handling cycles)
- 手写 flatten（depth 语义对齐原生）Write flatten yourself (depth behaves like the built-in)
- 手写 curry（部分应用可复用）Write curry yourself (reusable partial application)
- 手写 Promise.all + allSettledWrite Promise.all and allSettled yourself
- 手写 EventEmitter（on/off/once/emit）Write EventEmitter yourself (on / off / once / emit)
- 手写 LRUCache（用 Map 的插入序）Write LRUCache yourself (using Map insertion order)
- Orders subgraph：四个 resolver + DataLoaderOrders subgraph: four resolvers and DataLoader
- 六个 Spring Boot REST 端点Six Spring Boot REST endpoints