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 Blank slate — 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