第11天：函数组合、记忆化与定时器

今天复习了函数组合、记忆化、setTimeout 和 setInterval以下是知识点梳理与问答整理。一、函数组合Compose / Pipe1. 什么是函数组合我的回答把上一个函数的返回值作为下一个函数的参数形成流水线式的处理。compose 从右向左执行pipe 从左向右执行。补充compose从右到左const compose (...fns) (x) fns.reduceRight((acc, fn) fn(acc), x)pipe从左到右const pipe (...fns) (x) fns.reduce((acc, fn) fn(acc), x)2. 函数组合对函数参数有什么要求我的回答函数组合的参数只能有一个如果某个函数有多个参数需要先用柯里化转换成单参形式再进行组合。3. 应用场景函数组合常用于数据流处理比如数据清洗trim - toLowerCase - replaceconst trim s s.trim() const toLowerCase s s.toLowerCase() const cleanSymbol s s.replace(/[#$%]/g, ) // 组合从左到右清洗 const cleanString pipe(trim, toLowerCase, cleanSymbol) cleanString( HelloWorld# ) // 依次执行 // 1. trim - HelloWorld# // 2. toLowerCase - helloworld# // 3. replace - helloworldReact 的高阶组件组合const withRouter Component { ... } const withRedux Component { ... } const withTheme Component { ... } // 组合多个 HOC const enhance compose(withRouter, withRedux, withTheme) export default enhance(MyComponent)执行顺序withTheme → withRedux → withRouter → MyComponentRedux 中间件组合二、记忆化Memoization1. 什么是记忆化给函数加缓存相同参数直接取缓存避免重复计算。适用于纯函数能有效提高性能。2. 手写记忆化函数我的回答用 Map 存储根据参数生成唯一 key存在则返回缓存值否则计算结果并存入。function memoize(fn) { const cache new Map(); return function(...args) { const key JSON.stringify(args); if (cache.has(key)) return cache.get(key); const result fn(...args); cache.set(key, result); return result; }; }3. 缓存用什么数据结构为什么我的回答用 Map因为它的键可以是任意类型而 Object 的键只能是字符串。4. React 中的 useCallback 和 useMemo 与记忆化的关系我的回答useCallback 缓存函数本身防止每次渲染重新创建函数useMemo 缓存计算结果。在网易云项目中SongItem 的点击事件可以用 useCallback 缓存。5. 记忆化有什么限制我的回答只能用在纯函数上。如果函数有副作用或相同参数可能返回不同结果缓存会导致错误。三、setTimeout 与 setInterval1. 两者区别及应用场景我的回答setTimeout 指定时间后执行一次setInterval 每隔指定时间重复执行。setTimeout 适合防抖、节流setInterval 适合轮播图、计时器等周期性任务。补充还需注意 setInterval 可能因为任务执行时间过长导致堆积或因为回调耗时造成间隔不准。2. 定时器在事件循环中的执行机制我的回答定时器回调属于宏任务必须等同步代码和微任务执行完毕后才执行。即使时间到了也要排队。浏览器最小延迟为 4ms多次嵌套后。补充需注意setTimeout 的第二个参数是最小延迟时间而非精确执行时间。若主线程阻塞实际延迟会更长。3. 定时器不准时的原因我的回答因为 JS 是单线程如果前一个宏任务执行时间过长定时器回调会被延迟。例如setTimeout(fn, 100)但当前代码执行了 200ms则 fn 会在 200ms 后执行。此外浏览器对 setInterval 也有“丢帧”机制若回调耗时超过间隔下一次回调会立即执行可能导致连续执行但不堆积。4. 如何清除定时器不清除会导致什么问题我的回答用 clearTimeout(id) 或 clearInterval(id) 清除。不清除可能导致内存泄漏尤其是 setInterval 会持续执行消耗资源且可能操作已销毁的组件。补充在 React 中应在 useEffect 的清理函数中清除定时器避免组件卸载后仍执行。