function bar(){
    console.log(myName);
}
function foo(){
    var myName = 'hi 坑';
    bar();
}
var myName = 'bye 坑';
foo();

var name = "global name";
var obj = {
    name: 'Alice',
    getName: function() { console.log(this.name) }
}
var getName = obj.getName;
getName();


(function(){
    try{
        console.log(1, a);
        var a="a";
        console.log(a);
        b();
        c();
        function b(){
            console.log("b");
        }
        var c=function(){
            console.log("c");
        }
        console.log("d") // 没有被执行
    }catch(e){
        console.log('err')
    }
})()

// 2019.07 隐式转换:{}+{}=?
- 第三遍 2025.3.27 -
'[object Object][object Object]'
- 第二遍 2025.2.20 -
- 第一遍 2025.1.8  -

// 作业33：Cookie 怎么设置有效期？有优先级吗？HttpOnly 是什么含义？
- 第三遍 2025.3.27 -
Expires: deadline时间
Cache-Control: max-age=2000; 优先级高
HttpOnly 在响应头中设置 cookie 的属性值，只有 Http 协议能够访问该属性，用于解决 XSS 攻击 // ❌ 1、浏览器禁用 js 访问 cookie，例如 document.cookie
- 第二遍 2025.2.20 -
- 第一遍 2025.1.8  -

// 作业31：什么是长连接？长连接的属性怎么写？哪个版本开始启用长连接？
- 第三遍 2025.3.27 -
TCP 建立连接后，不会马上关闭 // ⭐️ 一个连接可以处理多个响应
Connection: keep-alive
HTTP/1.1 开始使用长连接
- 第二遍 2025.2.20 -
- 第一遍 2025.1.8  -

// 作业14：Proxy 的原型是什么？怎么撤销代理关联？是否可逆？写几个常见的代理模式对应的捕获器
- 第三遍 2025.3.27 -
Proxy 的原型为 undefined，所以使用 instanceOf 查询报错
const { proxy, revoke } = Proxy.revocable(target, handler);
rovoke() 不可撤销
const handler = {
    get(...arg) { Reflect.get(...arg) },
    set/has - 对应in/apply - 执行/constructor - new创建
}
- 第二遍 2025.2.20 -
- 第一遍 2025.1.8  -

// 2019.07 盒模型有哪些？有什么区别？
- 第三遍 2025.3.27 -
W3C标准盒，内容盒子，width 表示 内容宽度，不包含 border、padding
box-sizing: content-box;
width=内容宽度+border+padding // ⭐️ IE 盒模型
box-sizing: border-box;
- 第二遍 2025.2.20 -
- 第一遍 2025.1.20 -

// 作业16（1）：箭头函数和普通函数的区别是什么？（3点）
- 第三遍 2025.3.27 -
箭头函数内部不能使用 arguments new.target super 不能用作构造函数、类
没有 prototype
this 在定义时确定，不在运行时
// ⭐️ 设计初衷是简化函数表达式并固化 this，因此牺牲了这些特性
- 第二遍 2025.2.20 -
- 第一遍 2025.1.20 -

// 2021-07 常见Webpack问题
- 第六遍 2025.3.27 -
1、webpack的几个核心概念理解
Chunk - 根据 entry 入口配置，由多个模块组成、Module - 万物皆模块、plugin - 插件，构建过程中，在指定时机注入代码
2、常见配置项
entry: 'main.js'/{main:'main.js', sub:'sub.js'} // ⭐️  entry 不是 [] 是 {}
output: {filename: '[name]-[hash].js', path: path.resolve(_dirname, 'dist')}
module: { // ⭐️ 配置模块解析、转换规则
	 rules: [{ test:/.\js/, use: ['my-loader'] }, 
            { test:/.\css/, use: ['style-loader', 'sass-loader', 'css-loader'] }] // ❌ 1、应该是先 sass-loader 将 sass 解析成原生 css，再 css-loader 进行处理模块和依赖，例如解析import\url 路径，转换为 js 模块
}
resolve: {
   	alias:{'@c': '/src/my/component'},
	extension: ['json', 'ts', 'js'], // ❌ 2、文件扩展名 extensions
	modules: ['node_modules', path.resolve(_dirname, 'src/myC')]
}
自定义 loader 怎么配置？
- resolve.modules 配置解析模块的导入路径，添加路径 + 在 rules 的 use 中直接使用
- 在 rules 中 use 直接使用 use:[path.resolve(_dirname, 'src/myC/my-loader')]
3、Code Splitting 和 Tree Shaking 的区别？怎么开启配置？懒加载怎么实现？
Code Splitting 代码分割，根据 entry 入口，加载时只需要加载当前页面需要的模块，按需加载，提高加载效率；splitChunk 插件配置开启
Tree Shaking 按需打包，减小包体积，根据 entry 入口，打包时只打包相关代码；默认开启
懒加载：利用 Code Splitting 在首次加载页面的时候，只加载需要的模块，提高加载效率
4、html-webpack-plugin 作用？
将 webpack 打包结束后的 js/css 等静态文件，嵌入 html 文件中，可以直接渲染
5、sourceMap不同环境的区别？怎么开启配置？
devtool:eval-cheap-source-map; 
devtool:hidden-source-map; 线上默认关闭
6、热更新怎么实现？
① 启动 webpack，在内存中启动一个服务 dev-server，并注入 HMR 代码，和浏览器使用 Websocket 双向实时通讯
② 有代码更新后，监听 done 事件，将打包后的结果 mainfest.json 和 chunkId.js，将配置文件 json 主动推送给浏览器，浏览器拿到配置文件，通过 ajax 获取模块代码
③ 调用 webpackHotUpdate 更新对应模块 -> hotApply 替换模块代码，最后 webpack.__require__ 执行
7、webpack原理/执行过程？
①整合配置：将 shell 脚本的配置参数和配置文件整合 // ⭐️ 初始化参数
②利用配置初始化 Webpack 的 Compiler，引入所有插件，执行 .run 开始构建流程
③根据 entry 依赖关系，遍历所有文件，依次调用 loader 得到转换后的文件和依赖关系 // ⭐️ 串行调用
④得到文件和依赖关系，输出到下载文件列表 // ❌ 3、先再按照 entry 组合成一个个 Chunk
⑤按照 output 配置文件输出到指定位置
开发插件的桥梁？
Compiler 代表 webpack 的生命周期，唯一实例
Complication 代表一次编译，修改一次代码就出发一次创建实例
- 第五遍 2025.3.6 -
- 第四遍 2025.2.21 -
- 第三遍 2025.2.18 -
- 第二遍 2025.2.14 -
❌ // 1、entry: 配置方式记错 - 不识别 path 这个属性
❌ // 2、resolve 的作用不是解析，是「依赖查找配置规则」
❌ // 3、devtool:cheap-eval-source-map; （不提供列信息）方便代码调试
❌ // 4、 监听到 compiler 的 done 事件 得到的文件是 chunk.js 文件，浏览器从 mainfest.json 文件中得到了 ChunkId，获取 chunk.js
❌ // 5、window.webpackHotUpdate -> hotApply 热更新函数，替换原有模块代码
- 第一遍 2024.12.26 -

// 2020.07 对象分类、Promise按序执行、实现map
- 第八遍 2025.3.27 -
对象分类 
function classify(arr, property) {
    return arr.reduce((pre, cur) => {
        const key = cur[property];
        if(!pre[key]) {
            pre[key] = [];
        }
        pre[key].push(cur);
        return pre
    }, {})
}
Promise按序执行
function list(promises, init){
    return promises.reduce((pre, cur) => pre.then(cur), Promise.resolve(init))
}
实现map
Function.prototype.fakeMap = function(cb, thisArg) { // ❌ 1、不是 Function，是 Array
    // ❌ 2、数组 arr 其实应该是 this，调用这个 fakeMap 的对象
    return arr.reduce((pre, cur, index, array) => {
        const res = cb.call(thisArg, cur, index, array);
        pre.push(res); // ❌ 3、使用 pre[index] = res -> reduce 会默认跳过 empty，index 就对不上了
        return pre
    }, [])
}
- 第七遍 2025.3.6 -
- 第六遍 2025.2.21 -
- 第五遍 2025.2.18 -
❌ // 1、classify分类函数：reduce 的初始值应该是 {} 而不是 []
❌ // 2、map 是 Array 上的高阶函数，之前写错成 Function(想成bind了)，重写了
- 第四遍 2025.2.14 -
❌ // 1、again，map 接收两个参数，一个 callback 函数，第二个是 this 指向
- 第三遍 2025.1.24 -
- 第二遍 2025.1.19 -

// 作业68：React hooks 的作用和原理是什么？useEffect useState模拟实现
- 第十遍 2025.3.27 -
原理：闭包保存之前的值 + 每次组件更新都会遍历执行整个 hooks 链表
// ⭐️ 作用：在不编写类组件的情况下，使用 state 及 React 的状态管理能力、生命周期替代能力等
const memorizedState = {};
let cursor = 0;
--
function render(){ cursor = 0; return ReactDOM.createElement(<App/>); };
// ❌ 1、render 使用的函数错误 ReactDOM.render(<App />, document.getElementById('root'))
function fakeUseEffect(cb, arr) {
    const lastDep = memorizedState[cursor];
    const hasChanged = lastDep && lastDep.some((it, index) => !Object.is(it, arr[index]));
    if(!lastDep or hasChanged) {
        cb();
        render();
        memorizedState[cursor] = arr;
    }
    cursor++;
}
--
function render(){ return ReactDOM.createElement(<App/>); };
// ❌ 2、render 函数用法错误，内部函数是 render ，参数有第二项 ReactDOM.render(<App />, document.getElementById('root'))
function fakeUseState(init) {
    const current = cursor;
    [memorizedState[current] = [memorizedState[current] ?? init;
    const setValue = (v) => {
        [memorizedState[current] = v;
	    render();
    }
 	cursor++;	
    return [memorizedState[current], setValue]
}
- 第九遍 2025.3.6 -
- 第八遍 2025.2.21 -
- 第七遍 2025.2.17 -
- 第六遍 2025.2.12 -
❌ // 1、原理：没有事件委托，主要是 闭包和链表
❌ // 2、useEffect：使用 find 得到的是值，应该使用 some + 判断条件应该是 !Object.is
- 第五遍 2025.1.23 -
- 第四遍 2025.1.18 -
- 第三遍 2025.1.13 -
❌ // 1、UseEffect：少写了「更新依赖数组」的逻辑：memorized[count] = array;
❌ // 2、UseState：使用 value 会导致返回后，value 不会自动更新，和 memorized[currentCount] 失去了联系
❌ // 3、UseState：调用 setValue 必须触发 render
❌ // 4、UseEffect：cursor应该使用其他变量保存，和下文中 setValue 形成闭包 - 在异步情况下，cursor 可能会变化，导致索引错误

// 作业67：React 怎么做的性能优化？
- 第九遍 2025.3.27 -
1、fiber 架构：时间分片、渐进式渲染、增量式 Diff、优先级调度
2、是否重新渲染的渲染策略
eagerState策略：如果state新值并不依赖旧值渲染，则直接渲染 state 新值，不查询旧值
bailout策略：如果 state、props 没有变化，则跳过重新渲染
	shouldComponentUpdate(nextProps, nextState) 类组件
	React.memo(props => <p>{props.text}</p>) 函数组件，对 props 浅比较，不变则跳过重新渲染
    useCallback(a=>a*2, [a])/useMemo(b=>b*3, [b]) 依赖项不变则不重新渲染
- 第八遍 2025.3.6 -
- 第七遍 2025.2.21 -
- 第六遍 2025.2.17 -                                
- 第五遍 2025.2.12 -
❌ // 1、少写了 函数组件 React.memo - 浅比较props，不变则直接复用 
 ⭐️ // 记忆法：shouldComponentUpdate(类组件)/React.memo(函数组件)+2个hook：useMemo/useCallback
- 第四遍 2025.1.23 -
- 第三遍 2025.1.18 -
 ⭐️ // useCallback：每次渲染，函数都是重新生成的，用了这个就缓存住了
- 第二遍 2025.1.12 -

// 作业62：fiber架构是什么？优点和实现方式？
- 第十遍 2025.3.27 -
三个主模块组成 // ⭐️ 主流程
	Reconciler：调度器，主要用于在渲染阶段管理优先级调度，统一管理 // ❌ 1、流程名称错了：Scheduler + 作用少写了：宏观调控
    ？：对应 render 阶段，遍历生成 VDOM 和 收集副作用列表 // ❌ 2、流程名称错了：Reconciler 协调器，作用不是 render 阶段，是时间分片的处理，所以叫协调器：每次循环都会调用 shouldYield 判断当前 Time Slice 是否有剩余时间（没有则暂停更新，将主线程交给渲染流水线，等待下一个宏任务
    Render：commit 阶段，更新真实 DOM，同步执行，不能被打断 // ⭐️ 渲染器
前两个阶段都是异步的，在内存中执行，随时可能被打断：①报错 ②优先级更高的任务 ③时间切片不够
优点
	1 时间分片 + 渐进式渲染：在 fiber 之前都是同步对fiber 树遍历、对比、更新，阻塞渲染进程，fiber 将渲染过程拆分成一个个渲染任务，在每次绘制、空闲检查是否时间充足进行渲染任务执行 // ⭐️ 由调度器分配执行
	2 优先级调度：优先处理用户的交互，延迟一切非实时页面渲染，提高交互体验 // ⭐️ 为不同任务配置不同优先级
	3 增量式 Diff：根据渲染任务的执行，增量式进行 Diff 计算，提高算法效率 // ❌ 3、要描述到 逐步比较和更新部分节点，减小了每次比较的范围
- 第九遍 2025.3.6 -
三大主流程 
- Scheduler 调度器，管理优先级处理，在整个渲染阶段起到宏观调控
- Reconciler ？ 对应 render 阶段，在主线程空闲、重绘之前计算是否可以执行时间分片 shouldYield // ⭐️ 协调器
- Render 渲染器，对应 commit 阶段，更新到真实 DOM，同步执行，无法被中断
Scheduler + Reconciler：在内存中执行，异步，可被打断：①错误②时间分片不够③有更高优先级的任务 // ⭐️ 在内存中执行，不会更新宿主环境的 UI
优点
1、时间分片 + 渐进式渲染：之前 React 需要遍历、更新整个应用生成 VDOM，会长时间占用主线程，阻塞重绘；使用 fiber 架构，实现时间分片后，将渲染任务划分为一个一个小渲染任务单元，在空闲、重绘前执行计算，有充足时间则执行
2、优先级调度：优先处理用户交互的渲染任务，提高用户体验
3、Diff 增量式更新：根据渲染任务的执行情况，计算最小更新UI，提高 Diff 算法效率
- 第八遍 2025.2.20 -
- 第七遍 2025.2.17 -
- 第六遍 2025.2.10 -
❌ // 1、时间切片：之前 react 会对整棵树 对比+更新，同步执行，会长时间占用主线程，阻塞重绘；描述优化：小的单元任务，在空闲 + 重绘判断执行
- 第五遍 2025.1.22 -
- 第四遍 2025.1.18 -
❌ // 1、忘记中文：Scheduelor 是调度器
❌ // 2、增量式 Diff：不是一次性比较整棵树，而是根据任务执行进度，逐步比较、更新部分节点 - 减少了每次比较的范围，提高了效率 

// 2024-12 Nestjs 核心特性、基本概念、生命周期、获取请求和响应、不同组件的实现和执行顺序
- 第三遍 2025.3.27 -
核心特性:
	依赖注入DI、模块化结构、基于Express // ❌ 1、模块化架构 + 多种协议 HTTP/websocket
基本概念:
	服务*.service.ts、控制器*.controller.ts、模块*.module.ts、应用入口 main.ts
    在模块中注入服务，可以在控制器中使用服务
    令牌：在查找实例时的唯一标识 // ⭐️ 依赖注入时用于标识依赖项的唯一标识
    装饰器：一个表达式 // ❌ 2、返回一个函数，参数为目标/名称/属性描述符
生命周期:
	根据配置信息，实例化 Nest // ❌ 3、① 应用初始化：Nestjs框架启动，解析模块、控制器、provider等配置信息，构建依赖注入容器
    将服务、依赖注入容器// ❌ 4、②依赖解析和实例化：根据配置，解析各组件的依赖关系，依次实例化服务、控制器
    提供服务，接收请求，处理顺序：中间件-守卫-请求拦截器-管道-响应拦截器// ❌ 5、③应用启动：所有组件实例化后，应用监听指定端口，正式提供服务	④请求处理 ⑤应用关闭：执行关闭操作，销毁各组件实例
获取请求和响应
	请求// ❌ 6、若是对象或者数组，则自动序列化为 JSON；若基础类型，直接发送，不序列化
    响应 .json .send// ❌ 7、@Req @Body @Query 开箱即用 @Param 动态路由
不同组件的实现和执行顺序
	中间件
    	时机：在进入路由系统之前 // ❌ 8、少写了：全局请求的预处理，可以访问原生请求、响应，例如日志记录、请求验证、请求解析、跨域处理
        实现：...implements NestMiddleware{ use(ctx, req, res){} } // ❌ 9、use 的参数顺序是 use(req, res, next) + 少写了第二种写法：函数中间件 logger(req, res, next)
		配置：main.ts配置app.use(Mid)
            + app.moudle.ts 配置 ...implements NestModule{ 
                config(consumer) {consummer.apply(Mid).forRoutes('cats')} } // ⭐️ 函数名称是 configure
    守卫
    	时机：处理权限问题，返回布尔类型
        实现：...implements CanActivate{ canActivate(ctx){} }
		配置：main.ts 配置 app.useGlobalGuards(类/实例) // ❌ 10、少写了：全局 useClass 配置
			+ app.controller.ts 控制器中配置 @useGuards(类/实例)
    请求拦截器
    	时机：请求到达路由处理函数前，处理请求头
        实现：...implements NestInterceptor{ interceptor(ctx){} }
		配置：main.ts 配置 app.useGlobalInterceptors(类/实例) // ❌ 11、少写了：全局 useClass
			+ app.contoller.ts 控制器中配置 @useInterceptors(类/实例)
    管道
    	时机：将路由处理函数的参数进行处理，返回新的函数参数覆盖原参数
        实现：...implements PipeTransform(){ transform(value, metadata){} } // ❌ 12、少写了第二种内置实现方式：内置管道9个
		配置：main.ts 配置 app.useGlobalPipes(类/实例)
			+ app.controller.ts 控制器中配置 @usePips(类/实例) // ❌ 12、少写了在路由处理函数的配置：@Query('property', 类/实例)/@Param('property', 类/实例)/@Body(类/实例)
    响应拦截器
- 第二遍 2025.3.13 -
- 第一遍 2025.3.5 -
❌ // 1、更改描述为“模块化架构” + 多种协议 HTTP Websocket
❌ // 2、少写了 令牌：类是代码的具体实现，令牌是依赖注入的 标识依赖项的唯一标识，指向相应实例
❌ // 3、生命周期：描述不清楚 应用初始化：解析模块、控制器、provider等配置信息，收集、整理组件间的依赖关系注入容器(容器是个抽象概念，用于管理组件、依赖，启动时创建)
❌ // 4、依赖解析和实例化：根据配置，深度解析各组件依赖关系，根据关系依次实例化 provider、实例化控制器
❌ // 5、少写了响应方式：2种 对象/数组-自动序列化为JSON；基础类型-直接返回，不序列化

// 2019.07 css中的动画特性可以用js实现，那为什么还要用css来实现？
- 第四遍 2025.3.27 -
js 动画 加载后的执行会阻塞页面主线程的执行；需要写兼容代码；因为加载顺序，可能无法修改DOM样式
css动画 可以预加载，在 js 加载完成前就可以渲染动画；自然降级；可以GPU加速；js可操作 DOM 样式
// ❌ 1、CSS 动画可以在合成线程中完成，transform opacity 等只需在合成层操作，避免回流重绘带来的性能损耗
- 第三遍 2025.3.13 -
- 第二遍 2025.3.6 -
- 第一遍 2025.1.30 -

// 作业64：Vue渲染怎么实现的？
- 第十一遍 2025.3.27 -
1 模版编译 AOT编译
	parse 将模版编译为 AST // ⭐️ 词法分析 + 语法分析
    optimize 遍历 AST 标记静态节点
    generate 根据 AST 生成 render 函数
2 初始化组件+首次渲染 - 数据双向绑定
	初始化的时候，通过数据劫持+订阅发布，进行双向数据绑定 Object.defineProperty(obj, property, {get, set})/Proxy 
	在渲染组件 Watcher 时，利用 getter 将相关的 Watcher 收集到组件的 Dep 中存储 // ⭐️ 初次渲染
    在更新时，setter 触发所有相关 Watcher 的执行 dep.notify()
3 执行 render 函数生成 VDOM
4 Diff 计算得到最小更新 UI，应用到真实 DOM
- 第十遍 2025.3.13 -
- 第九遍 2025.3.6 -
❌ // 1、首次渲染时 getter 触发 Watcher 收集；更新时 setter 触发通知
- 第八遍 2025.2.20 -
- 第七遍 2025.2.17 -
- 第六遍 2025.2.11 -
❌ // 1、模版编译的阶段名称错误：parse - optimize - generate
- 第五遍 2025.1.23 -
- 第四遍 2025.1.18 -

// 2021.09 get和post有什么区别
- 第五遍 2025.3.26 -
get  参数在请求行中，大小限制 2kb，浏览器默认缓存  ，回退无害，参数在历史记录中被保存了
post 线束在请求体中，大小无限制   ，浏览器默认不缓存，回退有害，参数没在历史记录中
- 第四遍 2025.3.5 -
- 第三遍 2025.2.19 -
- 第二遍 2025.2.10 -
- 第一遍 2025.2.8 -
❌ // 1、从四个方面描述：数据参数 + 参数长度 + 回退安全性 + 缓存

// 2021.06 链表 141. 环形链表
- 第五遍 2025.3.26 -
function isCircle(head) {
    try{
        JSON.stringify(head);
        return false
    }catch(e){
        return true
    }
}
function isCircle(head) {
    while(head) {
        if(!head.isCircle) {
            head.isCircle = true;
        } else {
            return true
        }
        head = head.next;
    }
    return false
}
- 第四遍 2025.3.5 -
- 第三遍 2025.2.19 -
- 第二遍 2025.2.10 -
- 第一遍 2025.2.8 -
❌ // 1、判断条件是 while(head) 

// 2021.07 事件流 + 事件模型
- 第五遍 2025.3.26 -
事件流：捕获 从最外层 window-document-html-body-div...、冒泡 再从里层到最外层
事件模型：现代事件模型 - 利用事件委托，在组件渲染时，绑定在 document 上 
    // ⭐️ 事件委托基于冒泡 dom.addEventListener('click', ()=>{})
- 第四遍 2025.3.5 -
- 第三遍 2025.2.19 -
- 第二遍 2025.2.10 -
- 第一遍 2025.2.8 -

// 作业91：三次握手的过程和具体包的作用
- 第五遍 2025.3.26 -
SYN 序列编号包 ACK 确认包 // ⭐️ SYN 同步序列编号包
客户端发起 SYN
服务器返回 ACK + SYN
客户端返回 ACK
- 第四遍 2025.3.5 -
- 第三遍 2025.2.19 -
- 第二遍 2025.2.10 -
- 第一遍 2025.2.8 -

// 作业90：金玉满堂是什么意思？在花卉中的说法是什么？
- 第五遍 2025.3.26 -
指财富很多，形容学识充足，学富五车
花卉：玉兰 海棠 迎春 牡丹 桂花 - 玉堂春富贵
- 第四遍 2025.3.5 -
- 第三遍 2025.2.19 -
- 第二遍 2025.2.10 -
- 第一遍 2025.2.8 -

// 作业58：React和Vue是怎么描述UI的
- 第九遍 2025.3.26 -
React JSX = HTML+JS {} 类组件、函数组件 state、props
Vue 模版指令  v-for/v-if/v-if-else/v-show/v-model
- 第八遍 2025.3.5 -
- 第七遍 2025.2.20 -
- 第六遍 2025.2.17 -
- 第五遍 2025.2.10 -
❌ // 1、React 少写了 ：类组件+函数组件
❌ // 2、Vue 少写了：模版语法 + v-show
- 第四遍 2025.1.22 -
- 第三遍 2025.1.18 -

// 2021.07 柯里化函数 / 反柯里化函数实现
- 第五遍 2025.3.26 -
function curry(fn, ...arg1) {
    if(fn.length > arg1.length) {
        return (...arg2) => curry(fn, ...arg1, ...arg2)
    } else {
        return fn(...arg1)
    }
}
function uncurry(fn) {
    return (...args) => args.reduce((pre, cur) => pre(cur), fn)
}
- 第四遍 2025.3.11 -
- 第三遍 2025.3.2 -
// ❌ 1、不是直接返回回调，而是根据参数数量判断返回
// ❌ 2、参数不够时，返回一个包裹的函数
// ❌ 3、执行应该是 return fn(...args)
- 第二遍 2025.2.8 -

// 2019.07 数组去重（算法整理）
- 第六遍 2025.3.26 -
[...new Set(arr)]
Array.from(new Set(arr))
arr.filter((it, index) => index === arr.indexOf(it))
function unique(arr) {
    const hash = {};
    return arr.filter(it => hash[it] ? false : hash[it] = true)
}
- 第五遍 2025.3.11 -
- 第四遍 2025.3.2 -
- 第三遍 2025.2.8 -

// 2021.06 跨页面通信
- 第六遍 2025.3.26 -
同源页面
localStorage：只能处理非当前页面的通信，localStorage.setItem(key,v) + window.onstorage
BroadCastChannel：同名广播 const b1 = new BroadCastChannel('bbb');
一个页面传输，另一个页面可以接收 b1.postMessage('str') + b1.ommessage
非同源页面
postMessage：打开新的页面 const w = window.open('url'); 
w.postMessage('str') + window.onmessage
iframe：origin 设置成同源域名
- 第五遍 2025.3.11 -
❌ // 1、window.onstorage 监听函数名称错了
- 第四遍 2025.3.2 -
- 第三遍 2025.2.8 -
❌ // 1、构造函数的名称记错：BroadCastChannel

// 作业66：React如何处理错误
- 第十三遍 2025.3.26 -
使用 static getDerivedStateFromError 返回 state 覆盖之前的状态 + componentDidCatch 捕获 render + commit 阶段的错误，保证渲染过程中不溢出错误，影响整个APP应用的UI展示
class BoundariesError extends React.Component{
    constructor(props) {
        // ❌ 1、少写了 super(props); - 有组件状态的时候，必写
        this.state = { hasErr: false }
    }
    static getDerivedStateFromError() {
        return { hasErr: true }
    }
    componentDidCatch(err, info) {
        console.log(info)
    }
    render() {
        if(this.hasErr) { // ❌ 2、要去 state 中获取 this.state.hasErr
            return <div>There are errs.</div>
        } else {
            return this.props.children;
        }
    }
}
- 第十二遍 2025.3.11 -
- 第十一遍 2025.3.2 -
// ❌ 1、少写了 super(props)
- 第十遍 2025.2.27 -
- 第九遍 2025.2.24 -
❌ // 1、静态函数名称错了 getDerivedStateFromError 
- 第八遍 2025.2.10 -
- 第七遍 2025.2.9 -
- 第六遍 2025.1.29 -
- 第五遍 2025.1.22 -
- 第四遍 2025.1.18 -

// 2025.02 sequelize 在 Nestjs 中的 env 配置
- 第三遍 2025.3.24 -
// ❌ 1、使用 cross-env 在指令中传入 环境变量 NODE_ENV - 在 package.json 中配置 script
在 app.module.ts 引入 Sequelize 模块
import { ConfigModal } from 'nest/config'; ⭐️ // @nest/config
import type ConfigService from 'nest/config';
@Module() // ❌ 2、配置在装饰器 @Module({}) 中
export default class AppModule implements NestModule{
    imports:[
        RoutineModal,
        TimeModal,
        ConfigModal.forRoot({
        	env: path.resolve(_dirname, path.resolve(process.env.type || 'development.env')), // ❌ 3、配置名称是 envFilePath 配置文件路径 `.env.${process.env.NODE_ENV || 'development'}`
        	isGlobal: true
        }),
        SequelizeModal.forRootAsync((configService: ConfigService) => {
            // ❌ 4、Modal 是配置，而不是传入回调函数 {imports:[ ConfigModal ],useFactory:()=>{},inject:[ ConfigService ]}
        	return {
                user: 'root', ⭐️ // username 属性名错了
                passWord: configService.get('psw'),
                host: configService.get('host'),
                database: 'daily',
                dialect: 'mysql',
                inject: [Ltn, Time] // ❌ 5、导入数据路模块定义 应该使用models，而不是inject
                // ❌ 6、少写了 port:3306
            }
        })
    ]
}
// ❌ 7、导出默认的 APPModule 类
export class AppModule {}
- 第二遍 2025.3.10 -
- 第一遍 2025.2.28 -

// 2025.02 Nextjs 获取链接中的参数
- 第五遍 2025.3.24 -
import { useSearchParams } from 'next/navigation';
const params = useSearchParams();
const date = params.get('date');

import { useSearchParams } from 'react-dom-router'; // ❌ 1、包名不对 react-router-dom
const [params, setParams] = useSearchParams();
const date = params.get('date');
// ❌ 2、少写了 因为预渲染，路由是异步传入的，需要 <Suspense> 处理 layout.tsx
export default function RootLayout({children}:Readonly<{children: React.ReactNode}>) {
    return (<html lang='en'>
            	<body>
            		<Suspense fallback={<div>loading</div>}>
            			{children}
            		</Suspense>
            	</body>
            </html>)
}
- 第四遍 2025.3.10 -
- 第三遍 2025.3.1 -
❌ // 1、依赖包是 react-router-dom，是 router 不是 route
- 第二遍 2025.2.26 -
- 第一遍 2025.2.22 -
❌ // 1、核心函数的名称记错：useSearchParams

// 2025.02 Mysql 8.0 以上，Sequel报插件错
- 第五遍 2025.3.24 -
本地：改为安装包安装，安装的倒数第二步可以切换认证插件 mysql_login_plugin ⭐️ //Use Legacy Password
线上：进入 root 账户切换 mysql 文件的配置文件 // ❌ 1、不是配置文件，是指令，将用户的认证插件修改为 mysql_native_password
- 第四遍 2025.3.10 -
- 第三遍 2025.3.1 -
❌ // 1、线上改变的是 认证插件 mysql_native_password
- 第二遍 2025.2.26 -
- 第一遍 2025.2.22 -

// 作业98：sequelize 怎么写关联表的查询，指定关联的 column 是date
- 第七遍 2025.3.24 -
A.hasMany(B, {
	foreignField: B_id, // ❌ 1、foreignKey、sourceKey、targetKey
    sourceField: A_id
})
B.belongsTo(A, {
    targetField: B_id,
    sourceField: A_id
})
const res = await A.findAll({
    where,
	include: [{modal: B}] // ❌ 2、包含数据表的属性是 model + SQL 实现是使用 LEFT JOIN
})
以及必须配合 SQL // ❌ 3、记岔劈了，必须配合的是 唯一索引 - CTEARE UNIQUE INDEX+ADD UNIQUE KEY
CREATE INDEX VIEW `idx_date_sort` ON `daily` (`sort`, `date`)
ADD INDEX View `idx_date_sort` (`sort`, `date`)
- 第六遍 2025.3.10 -
- 第五遍 2025.3.1 -
// ❌ 1、include 关键词记错了
- 第四遍 2025.2.26 -
- 第三遍 2025.2.22 -
❌ // 1、数据库查询函数需要 await
- 第二遍 2025.2.17 -
- 第一遍 2025.2.13 -
❌ // 1、关键词记错了：belongsTo

// 2021-07 前端路由的两种模式
- 第五遍 2025.3.24 -
hash模式 - 前端切换 #hash，不会触发向浏览器发起请求，前端可以监听来更新/切换前端页面
	window.onhashchange=()=>{} + location.hash
history模式 - 需要服务器配合，通过 pushState/replaceState 修改 history 后，虽然不会马上触发浏览器向服务端发起请求，但是通过 history.go(n)/forward()/back()、操作前进后退按钮，就会触发 popState 使用 url 发起请求
history.pushState({state}, url, ''); ⭐️ // pushState 参数顺序 url 是第三个 (state,'',url)
window.addEventListener('popState', (e) => {
    console.log(e.state)
})
- 第四遍 2025.3.10 -
- 第三遍 2025.2.28 -
// ❌ 1、 window.addEventListener 是在 window 上而不是在 dom 上监听
- 第二遍 2025.2.26 -
- 第一遍 2025.2.20 -

// 作业93：闭包的作用和原理
- 第七遍 2025.3.24 -
原理：内部函数调用外部函数中的活动变量，由于被引用会导致活动变量没有被垃圾回收机制清理
// ❌ 1、少写了 核心是词法作用域，在定义时确定作用域，而不是执行时
作用：回调函数，保存变量，封装变量-私有变量 // ❌ 2、少写了定制化函数-函数工厂
- 第六遍 2025.3.10 -
- 第五遍 2025.2.28 -
- 第四遍 2025.2.26 -
- 第三遍 2025.2.19 -
- 第二遍 2025.2.10 -
- 第一遍 2025.2.8 -

// 2019.07 深拷贝和浅拷贝的区别？怎么实现深拷贝？
- 第六遍 2025.3.24 -
深拷贝和浅拷贝的区别：
基础类型：深浅拷贝都是将对象拷贝，新值的修改不会影响旧值
[...arr] arr.concat() arr.slice() Array.from(arr) {...obj} Object.assign({}, obj)
引用类型：浅拷贝是直接拷贝对象地址，修改新值会直接影响旧值；深拷贝是拷贝对象地址指向的内存空间，修改新值不会影响旧值
JOSN.parse(JSON.stringify(obj)) - 无法处理 function和循环
function isObj(t) {
    const type = typeof t;
    return  t !== null && (type === 'function' || type === 'object')
}
function normalType(t, type) {
    switch(type) {
        case '[object Date]':
            return new Date(t.getTime());
            break;
        case '[object ExpReg]':
            return new ExpReg(t.source, t.flags);
            break;
        case '[object Symbol]':
            return Symbol.for(t.description);
            break;
        default:
            const ctor = t.constructor;
            return new ctor(t);

    }
}
function deepClone(target, m = new WeakMap()) {
    if(!isObj(target)) {
        return target;
    }
    const detailType = Object.prototype.toString.call(target);
    const specialTypes = ['Map', 'Set', 'Array', 'Object'].map(it => `[object ${it}]`);
    if(!specialTypes.includes(detailType)) {
        return normalType(target, detailType);
    }
    
    const ctor = t.constructor;
    const res = new ctor();
    if(m.has(target)) {
        return m.get(target);
    }
    m.set(target, res);
    
    if(detailType === '[object Map]') {
        target.forEach((value, key) => {
            res.set(key, deepClone(value, m))
        })
    } else if(detailType === '[object Set]') {
        target.forEach((value) => {
            res.add(deepClone(value, m))
        })
    } else if(Array.isArray(target)) {
        target.forEach((it, index) => {
            res[index] = deepClone(it, m);
        })
    } else {
        for(let i in target) {
            res[i] = deepClone(target[i], m);
        }
    }
    return res
}
- 第五遍 2025.3.10 -
- 第四遍 2025.3.1 -
// ❌ 1、浅拷贝中 Object.assign(obj) 其实是直接返回了 obj 原对象，就是原对象，不算是浅复制，应该是 Object.assign({}, obj)
// ❌ 2、深拷贝中，需要初始化 res 为基础类型，方便后续存储、修改操作：const ctor = target.constructor; let res = new ctor();
// ❌ 3、Map 的 forEach 的回调函数的参数是 (value, key, map)
- 第三遍 2025.2.8 -
❌ // 1、属性名写错了：正则类型的 t.flags
❌ // 2、方法错了：object 不是可迭代对象，不能使用 for...of，这里应该改为 for...in

// 作业61：常见的数据结构有哪些
- 第八遍 2025.3.24 -
按照逻辑结构分
线性结构 栈、队列、数组、链表
非次线性结构 树 图
- 第七遍 2025.3.10 -
- 第六遍 2025.3.1 -
// ❌ 1、线性结构 + 非线性结构
- 第五遍 2025.2.15 -
- 第四遍 2025.2.9 -
- 第三遍 2025.2.2 -
❌ // 1、少写了一个类型：数组

// 作业88：mysql2 和 Sequelize 的使用场景？有哪些差异？简单写一个连接
- 第十一遍 2025.3.24 -
mysql2 是专门为 node 环境设计的 数据库驱动，可以直连数据库，主要写的是 SQL 来查询数据库
	- 支持 async/await  mysql2/promise；同时管理多个数据库连接
Sequelize ORM 工具，将数据库表和行映射为对象模型，适合于函数式编程
import { createPool } from 'mysql2'; // ❌ 1、依赖包是 'mysql2/promise'
const pool = createPool({user, password, host, database});
// ❌ 2、创建 pool 连接池 之后，再获取连接 const con = await pool.getConnection()
const rows = await pool.execute('SELECT * FROM table');
// ❌ 3、这里的 rows 是数组 且不是 pool 直接调用执行 SQL 函数，应该是连接执行 SQL 指令，可以直接 [rows] 来数组解构，真正赋值给 rows

import { Sequelize, DataType, Modal } from 'sequelize';
const se = new Sequelize(database, user, password, {
    host: 'localhost',
    dialect: 'mysql'
})
⭐️ // 创建连接后，一直保持打开状态，并对所有查询使用相同状态，关闭需要单独调用实例关闭 se.close()
// 法1 ⭐️ // 底层是调用 Modal 实现的
const User = se.define('table', {
    name: DataType.STRING
}, {
    timestamps: true,
    underscored: true
});
// 法2 ⭐️ // 模型是 Sequelize 的本质
class User2 extends Modal{}
User2.init({
    name: DataType.STRING
}, {
    modalName: 'table', // ❌ 4、modelName 模块名称
    sequelize: se
})
- 第十遍 2025.3.10 -
- 第九遍 2025.3.1 -
- 第八遍 2025.2.26 -
- 第七遍 2025.2.21 -
❌ // 1、mysql2:获取连接的函数错了 await getConnection()
❌ // 2、mysql2:执行 SQL 需要 await
- 第六遍 2025.2.17 -
- 第五遍 2025.2.12 -
❌ // 1、sequelize：实例化参数错误 + init 参数错误
❌ // 2、sequelize：define 第三个参数应该是一些配置
- 第四遍 2025.2.9 -
- 第三遍 2025.1.31 -
❌ // 1、mysql2：导入依赖包错了 mysql2/promise + createPool的参数 少写了 database
- 第二遍 2025.1.26 -
❌ // 1、mysql2：创建连接池 createPool 不需要 await
- 第一遍 2025.1.22 -

// 作业72：react 的 声明周期有哪些，在不同生命周期中做什么事情？
- 第十一遍 2025.3.24 -
类组件 - 生命周期函数
挂载前 shouldComponentUpdate(nextProps, nextState)是否需要重新渲染 getDerivedStateFromProps 
挂载阶段:componentDidMount 挂载到真实 DOM 后 
// ❌ 1、挂载前的说法 不对，挂载阶段分为挂载前、挂载中、挂载后 - 是创建组件【重点注意】+首次挂载到DOM - 顺序是先①constructor 组件的构造函数，用于初始化state和事件处理函数的this、②static getDerivedStateFromProps 再到执行③render() 最后挂载后执行的 ④componentDidMount
更新阶段: componentDidUpdate 更新到真实 DOM 后 // ❌ 2、shouldComponentUpdate 是在更新阶段进行性能优化的，更新阶段的主要行为是 重新执行 render 构建出新的 VDOM，顺序是先 ①static getDerivedStateFromProps 再 ②shouldComponentUpdate(nextProps, nextState) 判断是否重新渲染，再 ③render 重新渲染，更新后 ④componentDidUpdate
卸载阶段: componentWillUnMount 卸载前，清理
函数组件 - 模拟生命周期
useEffect 模拟生命周期函数
useLayoutEffect 在更新到真实 DOM 后
- 第十遍 2025.3.10 -
- 第九遍 2025.2.28 -
- 第八遍 2025.2.12 -
- 第七遍 2025.2.9 -
- 第六遍 2025.1.31 -
❌ // 1、挂载阶段 少写了 constructor - 初始化 state 和绑定事件处理函数的 this
- 第五遍 2025.1.25 -
- 第四遍 2025.1.24 -
❌ // 1、更新阶段的 shouldComponentUpdate 写错在挂载阶段，实际应该归属于更新阶段
❌ // 2、阶段划分是：挂载-更新-卸载，其中更新阶段记错了 - 应该是当组件的 state/props 变化，进入更新阶段，重新执行 render 函数来更新 DOM
- 第三遍 2025.1.19 -

// 2021.04 25 HTTP/2 特性
- 第五遍 2025.3.23 -
语义层面不变，语法层面大力改造
1 压缩头部算法 ⭐️ // HPACK 算法
2 改为二进制帧 - 双向传输序列形成虚拟的流，多路复用 - 一个连接上可以处理多个请求响应，没有顺序限制的时候，也在应用层解决了队头阻塞
3 服务端可以主动发起请求
4 可以设置优先级
5 升级为 HTTPS
- 第四遍 2025.2.23 -
- 第三遍 2025.2.2 -
❌ // 1、少写一个特性：服务器推送

// 作业79：地球四季的成因是什么？
- 第四遍 2025.3.23 -
和太阳照射时长无关，是太阳直射点的位置移动、和地面夹角的改变，改变经过大气层的路径长度
// ❌ 1、和太阳照射时长 + 太阳直射点移动 - 路径长度的改变会改变衰减的辐射能量强度；和太阳公转造成的地球和太阳距离没啥关系
- 第三遍 2025.2.23 -
- 第二遍 2025.2.2 -

// 作业77：重绘和重排是什么？有什么区别？
- 第四遍 2025.3.23 -
DOM树- CSS树 - 布局 - 分层 - 合成
重排：需要重新计算样式布局，再分层合成 - 性能消耗高
	- css 属性增删、style属性样式变更、伪元素激活、内容大小、位置改变、访问节点位置 ⭐️ // 页面初始渲染、dom 元素增删、resize 窗口、伪类激活、节点布局属性查询
重绘：不需要重新计算布局，直接绘制到合成
	- 字体、背景颜色
- 第三遍 2025.2.23 -
- 第二遍 2025.2.2 -

// 作业54：举杯邀明月，对影成三人。的上一句
- 第五遍 2025.3.23 -
花间一壶酒，独酌无相亲
- 第四遍 2025.2.23 -
- 第三遍 2025.2.2 -

// 作业49：牛顿三大定律、热力学两大定律
- 第五遍 2025.3.23 -
三：惯性定律、加速度定律、作用力与反作用力定律
二：能量守恒定律、熵增定律
- 第四遍 2025.2.23 -
- 第三遍 2025.2.2 -
❌ // 1、少写了惯性定律 - 公交车记忆：刹车-加速度、乘客-惯性、地上痕迹-摩擦

// 69 x 的平方根
- 第五遍 2025.3.23 -
function sqrt(n){
    const mid = Math.floor(n/2) + 1;
    let res = 0;
    for(;res < mid; res++){
        if(res * res <= n && (res + 1)*(res+1) > n){
            return res
        }
    }
    return res
}
function sqrt(n) {
    let left = 0;
    let right = n + 1;
    while(left + 1 < right) {
        const mid = Math.floor((left + right) /2);
        if(mid * mid > n){
            right = mid
        } else {
            left = mid
        }
    }
    return left
}
- 第四遍 2025.3.16 -
❌ // 1、for(;res <=mid; res++) 不需要等于号，完全平方数时，导致多余的循环
❌ // 1、right 取 x + 1，使下面的循环成立
❌ // 2、while(left <= right) 会导致死循环 while(left + 1 < right)
- 第三遍 2025.3.1 -
- 第二遍 2025.2.26 -
- 第一遍 2025.2.21 -
❌ // 1、res 应该从 0 开始数，否则 n 为 0 时会返回 1

// 作业97：Sequelize 中查找某条数据，如果存在就更新；不存在就创建一条
- 第七遍 2025.3.23 -
async getData(data) {
    const [issue, created] = await modal.findOrCreate({where, defaults: data});
    if(!created){
        issue.set(data);
        await issue.save();
    }
}
- 第六遍 2025.3.16 -
❌ // 1、data 的接收属性是 defaults
- 第五遍 2025.3.1 -
- 第四遍 2025.2.26 -
- 第三遍 2025.2.22 -
❌ // 2、issue.set 不需要 await
- 第二遍 2025.2.17 -
❌ // 2、更新时：先set数据，再保存
- 第一遍 2025.2.13 -

// 作业51： 如何停止过度思考？如何停止焦虑
- 第四遍 2025.3.23 -
思考令人上瘾，让自己 get it，然后 let it go，回到当下
停止焦虑：其实是害怕失败，那就写下所有可能成功的路径，去做
- 第三遍 2025.3.16 -
❌ // 1、思考令人上瘾，get it，回到当下 + 焦虑失败则写下所有可以成功的方式，去做
- 第二遍 2025.2.15 -
- 第一遍 2025.1.9 -

// 作业48： input 和 textarea 对比（宽度设置，初始值设置）；option 标签的初始值设置
- 第四遍 2025.3.23 -
input 单行，size 设置宽度，单位为字符，maxLength 设置最大长度， value 设置初始值
textarea 多行，cols 设置宽度，rows 设置高度，标签间的值作为初始值
option 有 value 属性时取 value 属性，没有时取标签中间值作为初始值
- 第三遍 2025.3.16 -
❌ // 1、textarea 的初始值取标间中间值，而不是 value，该标签没有 value 属性，即设置了也无效
- 第二遍 2025.2.15 -
- 第一遍 2025.1.9 -

// 2019.10 两栏，左边固定，右边自适应的布局
- 第七遍 2025.3.23 -
.left { width: 100px }
1 .left{ float: left } .right{ margin-left: 100px }
2 .left{ position: absolute } .right{ margin-left: 100px }
3 BFC .left{ float: left } .right{ overflow: hidden }
4 flex .outer{ display: flex } .right{ flex:1 }
5 table/grid .outer{ display: table; width: 100% } .left, .right{ display: table-cell }
.outer{ display:grid; grid-template-columns: 100px auto }
6 calc .left,.right{ float: left } .right{ width: cacl(100% - 100px) }
- 第六遍 2025.3.16 -
❌ // 1、少写了 BFC .left{float:left} .right{overflow:hidden}
- 第五遍 2025.3.8 -
❌ // 1、grid-template-columns
- 第四遍 2025.2.14 -
- 第三遍 2025.1.24 -
- 第二遍 2025.1.19 -
❌ // 2、父盒子变成弹性盒子后， right 要变成可拉伸 .right { flex: 1 }

// 2024.10 怎么实现跨域
- 第七遍 2025.3.23 -
1 jsonp 只能处理 GET，利用 script 标签 src 不受限
2 CORS Access-Control-Allow-Origin 响应头/meta设置 配置服务端信任的域名
3 nginx 代理，服务端之间没有同源协议限制
4 websocket 全双工-实时通讯协议，不受同源协议的限制
- 第六遍 2025.3.16 -
❌ // 1、jsonp 只支持 GET 请求
❌ // 2、属性名错误 Access-Control-Allow-Origin、配置方式是响应头
- 第五遍 2025.3.8 -
❌ // 2、CORS 服务端允许的哪些域名可以访问 - 是为了让浏览器知道哪些域名可以访问，而不是从客户端角度描述
- 第四遍 2025.2.14 -
- 第三遍 2025.1.24 -

// 作业70：Vue 和 React 的 Diff 算法比较
- 第十三遍 2025.3.23 -
Vue diff - ①静态节点跳过 ②双端指针算法-同标签同key 索引比较 - 同标签同key复用
React diff - 分层比较 + 同标签优先比较；不同标签-直接重新渲染，同标签-修改属性，同标签同key 移动复用
- 第十二遍 2025.3.16 -
❌ // 1、React 同类型优先比较
- 第十一遍 2025.3.2 -
- 第十遍 2025.2.27 -
❌ // 1、Vue 是组件级别的更新 + React 是节点属性级别的更新
- 第九遍 2025.2.23 -
❌ // 1、Vue 少写：Diff 跳过静态节点
❌ // 2、React 少写了：分层比较 + DFS 深度优先遍历子节点，逐个比较
- 第八遍 2025.2.18 - 
- 第七遍 2025.2.16 -
❌ // 1、Vue 少写了：双端指针比较算法找不到时，要判断 同类型+同key 节点是否同索引
- 第六遍 2025.1.31 -
- 第五遍 2025.1.25 -
- 第四遍 2025.1.24 -
- 第三遍 2025.1.18 -
- 第二遍 2025.1.13 -

// 作业17：对斐波那切数列进行尾调用优化
- 第五遍 2025.3.23 -
function fib(n){
    if(n<2) return n;
    return fib(n-1)+fib(n-2)
}
优化
function fib(a, b, n) {
    if(n===0) return a;
    return fib(a+b, a, n -1)
}
- 第四遍 2025.3.16 -
❌ // 1、n为0时，return a
❌ // 2、第二个参数 应该是 a，否则 b 一直是 1
- 第三遍 2025.2.16 -
❌ // 1、参数传递可以传 b,a+b,n-1 或者 a+b,a,n-1
- 第二遍 2025.1.20 -

// 作业76：显卡的作用？
- 第六遍 2025.3.22 -
将位图合成图像，渲染帧存储入后缓存区 ⭐️ // 后缓冲区
⭐️ // 一旦合成的图像写到后缓冲区，系统就会让前后缓冲区互换
- 第五遍 2025.3.1 -
- 第四遍 2025.2.15 -
- 第三遍 2025.2.10 -
- 第二遍 2025.2.2 -

// 作业73：react 的 setState 是同步还是异步？为什么React有时候有两次 setState，却只执行一次？
- 第七遍 2025.3.22 -
在合成事件+生命周期函数中，setState 有 批量更新机制，是异步的 - 在事件处理函数中，遇到 setState 时，收集到一个队列，在执行完事件处理函数的逻辑后，批量执行 setState ，然后触发一次更新渲染
在原生事件/setTimeout等函数中 setState 是同步的，调用一次，执行一次，触发一次更新渲染
- 第六遍 2025.3.1 -
- 第五遍 2025.2.15 -
- 第四遍 2025.2.10 -
- 第三遍 2025.2.2 -
❌ // 1、除了合成事件，还有「生命周期函数」中都是异步

// 作业59：什么是高阶函数?什么是高阶组件？什么是副作用？简单举例
- 第八遍 2025.3.22 -
高阶函数：参数或者返回值是函数的函数 map sort
高阶组件：参数是组件的组件
副作用：函数式编程的说法，除了返回值，还会影响其他值，例如修改全局变量、参数、IO下载交互等
const a = function(MyC){
    return class extends React.Component{
        constructor(props) {
            super(props);
        }
        render() {
            return <MyC {...this.props} />
        }
    }
}
- 第七遍 2025.3.1 -
- 第六遍 2025.2.15 -
- 第五遍 2025.2.9 -
- 第四遍 2025.2.2 -
⭐️ // 副作用，少写了：除了返回值

// 作业55：flex 常见缩写
- 第八遍 2025.3.22 -
flex: none; 0 0 auto
flex: auto; 1 1 auto
flex: initial; 0 1 auto
flex: 1; 1 1 0 
- 第七遍 2025.3.1 -
- 第六遍 2025.2.15 -
- 第五遍 2025.2.9 -
❌ // 1、把 0 0 auto 的缩写写错，应该是 flex: none;
- 第四遍 2025.2.2 -
❌ // 1、少写了一个 flex: initial; // 0 1 auto

// 作业74：起舞弄清影 是那首诗？谁写的？下一句是什么？
- 第六遍 2025.3.22 -
苏轼 《水调歌头 明月几时有》
明月几时有，把酒问青天，不知天上宫阙，今夕是何年。
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
转朱阁，低绮户，照无眠。// ❌ 1、顺序反了，先起舞，后转朱阁
起舞弄清影，何似在人间。
不应有恨，此时长向别时圆。
⭐️ // 少写了：人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
- 第五遍 2025.3.1 -
// ⭐️ 顺序反了，先不应有很，何事长向别时圆？再人有
// ⭐️ 少写了 但愿人长久，千里共婵娟
- 第四遍 2025.2.15 -
- 第三遍 2025.2.9 -
- 第二遍 2025.2.2 -

// 作业25：简单写下 请求创建过程
- 第八遍 2025.3.22 -
function XMLRequest(url){
    const xhr = new XMLHttpRequest();
    xhr.ontimeout = ()=>{};
    xhr.onerror = ()=>{};
    xhr.onreadystatechange = (res) => {
        switch(res.readyState) {
            case 0:
                break;
            case 4:
                if(this.status === 200 || this.status === 304) {
                    return console.log(this.responseText);
                }
        }
    }
    xhr.open('GET', url, true);
    xhr.timeout = 3000;
    xhr.responseType = 'text';
    xhr.setRequestHeader(key, value);
    xhr.send();
}
- 第七遍 2025.3.1 -
- 第六遍 2025.2.15 -
- 第五遍 2025.2.9 -
⭐️ // status 在 this 上
- 第四遍 2025.2.2 -
❌ // 1、函数名称错误：onreadystatechange
❌ // 2、readyState 状态属性不在 this 上，在 res 上：res.readyState
❌ // 3、switch 中 0 表示请求还没开始，要使用 break 跳出循环
❌ // 4、open 的参数顺序记错了：xhr.open('GET', url, true)

// 作业6：new操作符实例化一个对象的过程
- 第七遍 2025.3.22 -
function fakeNew() {
    const ctor = [].shift.call(arguments);
	const obj = new Object();
    obj.__proto__ = ctor.prototype;
    const res = ctor.apply(obj, arguments);
    return typeof res === 'object' ? res : obj;
}
- 第六遍 2025.3.16 -
- 第五遍 2025.2.24 -
- 第四遍 2025.2.10 -
- 第三遍 2025.2.9 -
- 第二遍 2025.1.28 -
❌ // 1、实例的 __proto__ 指向的不是构造函数，是构造函数的原型对象 ctor.prototype;
- 第一遍 2025.1.20 -
❌ // 1、不是调整 constructor 的指向，是设置实例的原型 __proto__

// 作业92：前端中的序列化是什么？常见序列化方法。反序列化是什么？有哪些方法。写个POST调用流程
- 第七遍 2025.3.22 -
序列化：将对象结构转换成方便存储、传输的格式
	JSON.stringify(data) 转换成 json 格式 ⭐️ // 无法处理 function 和 循环引用
	new FormData(form) 转换成键值对组成的 json
反序列化：响应返回的都是 json 格式，需要转换成 js 格式
JSON.parse(data) response.json()
const options = {
    methods: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(data)/new FormData(form)
}
const data = await fetch('xx', options);
data.then(res => res.json()).then(res => res);
- 第六遍 2025.3.15 -
❌ // 1、POST 的数据在 body 中
❌ // 2、少写了 headers: { 'Content-Type': 'application/json' }
- 第五遍 2025.2.28 -
- 第四遍 2025.2.26 -
- 第三遍 2025.2.19 -
❌ // 1、将「数据结构、对象」转换为可以「存储、传输」的格式的过程
- 第二遍 2025.2.10 -
❌ // 1、new FormData 收集表单数据并序列化，转换成键值对格式
- 第一遍 2025.2.8 -

// 作业87：Nextjs 中预渲染是什么？有哪些模式？写一个动态路由的page
- 第十一遍 2025.3.22 -
预渲染：主要由 SSR 服务端渲染 getServerSideProps + SSG 静态生成 generateStaticParams + ISR 增量
⭐️ // NextJS 中所有组件默认为服务端组件，默认实现服务端渲染
静态生成 revalidate
服务端渲染 - 在客户端发起请求时，服务端将 data 获取后，生成 HTML，客户端直接渲染，客户端js 不需要执行
增量静态生成 - 在运行时，根据 revalidate 定时在服务端更新 HTML，方便客户端直接调用 ⭐️ // 增量更新
SSR
import getServerSideProps from 'next/server';
export async function getServerSideProps(){
    const res = await fetch('xxx', options);
    const data = await res.json();
    return {props: {data}}
}
export function Blog({data}){return <div>{data.text}</div>}
SSG
export async function generateStaticParams() {
    return [{slug: 'first'}, {slug: 'second'}]
}
export const revalidate = 60;
export function Blog({slug}){return <div>{slug}</div>}
- 第十遍 2025.3.15 -
❌ // 1、SSG 少写了 generateStaticParams
❌ // 2、SSR 依赖包错了 next/server
❌ // 3、response.json 少写了 await
- 第九遍 2025.3.1 -
- 第八遍 2025.2.26 -
- 第七遍 2025.2.21 -
- 第六遍 2025.2.17 -
- 第五遍 2025.2.12 -
❌ // 1、SSG + SSR：函数 都少写了 async
- 第四遍 2025.2.9 -
❌ // 1、名称错误：服务端渲染SSR、静态生成SSG、增量静态生成ISR + 客户端、服务端生成的结果都是 HTML
- 第三遍 2025.1.31 -       
- 第二遍 2025.1.26 -
- 第一遍 2025.1.22 -

// 2021.07 数组扁平化（一层、全部展开、指定深度）
- 第九遍 2025.3.21 -
一层 arr.flat()  [].cancat(...arr) [].cancat.apply([], arr) [].concat.call([], ...arr)
全部展开 arr.toString().split(',') // ❌ 1、少写了 arr.flat(Infinity)
指定深度
function deepArr(arr, deep = 1){
    return arr.reduce(it => it.concat(Array.isArray(it) && deep > 1 ? deepArr(it) : it ))
    // ❌ 2、reduce 的使用方法错了 return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) && deep > 1 ? deepArr(cur, deep - 1) : cur ), [])
}
- 第八遍 2025.2.28 -
- 第七遍 2025.2.12 -
- 第六遍 2025.2.9 -
- 第五遍 2025.1.31 -
❌ // 1、JSON.parse(JSON.stringify(arr)) 是用于深拷贝的，不能展开
- 第四遍 2025.1.25 -
- 第三遍 2025.1.24 -
❌ // 1、少写了 arr.flat(Infinity)
❌ // 2、全部展开递归函数中，pre 的值不要使用 push 来更新 - concat 既能处理数组，也能处理非数组
- 第二遍 2025.1.19 -
❌ // 1、deep 传递的时候要减一

// 2025-03 p-limit 使用+源码 、100个请求并发请求
- 第二遍 2025.3.21 -
import pLimit, { limitFunction } from 'p-limit';
// 方法1
const limit = new pLimit(4);  // ❌ 1、创建限制器不需要 new：limit = pLimit(6)
const arr1 = Array.from({ length: 30 }, (it, index) =>
	limit(() => new Promise((resolve) => setTimeout(resolve, index * 88, index)))
)
Promise.all(arr).then(res => console.log(res))
// 方法2
const arr2 = Array.from({ length: 30 }, (it, index) =>
	limitFunction(() => new Promise((resolve) => setTimeout(resolve, index * 88, index)),
	{ concurrency: 4 })
)
//  源码
function validate(limit) {
    if (!Number.isInteger(limit) || limit < 0) {
        throw new Error('concurrency 无效') ⭐️ // TypeError
    }
}
function pLimit(concurrency) {
    validate(concurrency);
    const queue = [];
    let running = 0;
    const next = () => {
        running--;
        if (queue.length) { ⭐️ // queue.length > 0
            queue.pop()();
        }
    }
    const run = async (resolve, fn, arg) => {
        running++;
        resolve(fn(...arg));
        ❌ /** 2、直接执行不对，需要 await + 应该使用 try-catch
        try{ 
        	const result = await fn(...arg);
        	resolve(result);
        }catch(e){
        	resolve(Promise.reject(e))
        }*/
        next()
    }
    return (fn, ...arg) => {
        return new Promise((resole) => {
            if (running < concurrency) {
                run(resolve, fn, arg)
            } else {
                queue.push(() => run(resolve, fn, arg))
                ⭐️ // 更优的写法：queue.push(run.bind(null, resolve, fn, arg))
            }
        })
    }
}
function limitFunction(fn, options) {
    const limit = new pLimit(options.concurrency);
    return limit(() => fn)
    ❌ // 3、return 的应该是函数 return (...arg) => limit(() => fn(...arg))
}
// 100个并发请求
const arr = Array.from({ length: 100 }, (it, index) => {
    return () => new Promise((resolve) => setTimeout(resolve, index * 99, index))
    ❌ // 4、return 的不应该是函数，而是直接的 promise
})
async function Co(arr, concurrency) {
    const indexedArr = arr.map((it, index) => ({
        index,
        promise: () => Promise.resolve(it).then(value => ({ key: index, value })) ❌ // 5、不应该是函数，应该是 promise
    }))
    const result = [];
    const queue = indexedArr.splice(0, concurrency);
    while (queue.length) { ❌ // 6、queue.length > 0
        const { key, value } = await Promise.race(queue.map(it => it.promise))
        result[key] = value;
		❌ // 7、解决的 promise 在 queue 里面的 index 需要重新查找：const resolvedIndex = queue.findIndex(it => it.index === key)
        queue.splice(key, 1); ❌ // 8、queue.splice(resolvedIndex, 1)
        queue.push(indexedArr.pop()) ❌ // 9、需要判断 indexedArr 是否还有待处理函数 if(indexedArr.length > 0){ queue.push(indexedArr.pop()) }
    }
    return result
}
- 第一遍 2025.3.14 -
❌ // 1、p-limit 还可以导出一个函数 { limitFunction } 处理
❌ // 2、创建限制器不需要 new：limit = pLimit(6)
❌ /** p-limit 函数实现，而不是类
需要校验传入的 concurrency 是否为正整数
next 执行队列中下一个任务 count-- 一个任务完成则减一
run  执行任务封装 count++ 表示有个新任务开始开始执行*/

// 2025-3 NestJS 守卫-校验权限 + 2025-3 NextJS 全局中间件-校验权限
- 第一遍 2025.3.20 -
权限校验
Nest - 守卫
function MyAuth(ctx) { ❌ // 1、不拆分处理 且 不等于的时候需要 throw new UnauthorizedException
    const header = ctx.request.header;
    const auth = header.get('auth')
    if(auth !== 'xxx'){
        return false;
    }
    return true;
}
@Injectable() ❌ // 2、少写了()：装饰器需要执行
export class MyAuth implements CanActivate { ❌ // 3、少写了 class 声明
    canactivate(config){ ❌ // 4、canactivate 的参数是 ctx；config 这边应该是 Nest 中间件 - 配置时，控制器中 ...implements NestModule{ configure(consumer){consumer.apply().forRoutes()} }
        config.apply(类/实例).forRoutes('cats') ;
		❌ // 5、从 context 中获取 request：const request = ctx.switchToHttp().getRequest()
        ❌ // 6、再从 request 中获取 headers：const headers = request.headers;
        ❌ // 7、if(headers.auth !== 'xxx'){ throw new UnauthorizedException('x') }
    }
}
使用 @useGuard(MyAuth) ❌ // 8、useGuards 少了个 s

Next - 全局中间件 ❌ // 1、middleware.ts 放在 app 同层级下面，src/middleware.ts
❌ // 2、路由配置器 export const config = { matcher: '/api/:path*' }
export function MyAuth(request: NextRequest, next) { ❌ // 3、少写了 export 且参数没有 next
    const header = request.switchHttp().getRequest().header;
    const auth = header.get('auth');
	❌ // 4、headers 获取的方式：NextRequest 已经封装好了 const headers = request.headers
    ❌ // 5、变量的获取方式 const auth = headers.get('Auth')
    if(auth !== 'xxx'){
        return NextResponse.josn({status: 500, error: 'wrong auth'}); ⭐️ // 401
    }
    next(); ❌ // 6、next 调用 NextResponse.next()
}

// 2024-11 数组乱序 洗牌算法 从最后一个元素开始，从数组中随机选出一个位置，交换，直到第一个元素。
- 第三遍 2025.3.20 -
function shuffle(arr) {
    let lastIndex = arr.length - 1;
    while(lastIndex >= 0) {
        const random = Math.random() * arr.length; ❌ // 1、少处理成整数 Math.floor
        [arr[random], arr[lastIndex]] = [arr[lastIndex], arr[random]];
        lastIndex--;
    }
    return arr
}
- 第二遍 2025.2.20 -
- 第一遍 2024.12.25 -

// 2021-04 实现给定时间切换状态
- 第二遍 2025.3.20 -
async function time(promise, delay) {
    return await Promise.race([promise, 
                               new Promise((resolve, reject) => setTimeout(reject, dealy, new Error('超时')))])
}
- 第一遍 2025.2.20 -

// 2021-07 给DOM元素绑定事件
- 第二遍 2025.3.20 - 
HTML 标签 onlick ❌ // 1、少写了 onclick 属性值为可执行代码而不是函数 onlick='init()'
事件委托 dom.addEventlistener('click', (e) => {console.log(e)})
❌ // 2、少写了两者差异：事件委托可以给同一个元素添加多个事件；onclick 一个元素只能添加一个事件
- 第一遍 2025.2.20 -

// 2025.02 Express VS KOA2
- 第三遍 2025.3.20 -
Express 
	设计理念：主要是回调函数实现异步，后已支持异步promise async/await；框架功能完整，开箱即用
    中间件：线性模型，通过 next 线性执行中间件
    错误处理：res.json()/res.send()
    app.use((err, req, res, next)=>{ 
    	res.end({status: 500, message: err})
        ❌ // 1、res.status(500).send(err)
    })
    上下文：req res ❌ // 2、res.json/res.send 都是基于底层的 Node 的 Response.end 封装的
KOA2
	设计理念：基于 async/await 实现，适合复杂异步场景；代码简单、灵活、性能好
    中间件：洋葱模型，先入栈依次执行，再出栈依次执行
    错误处理：app.use(async(ctx, next) => { 
    	try{await next()}catch(e){ ctx.status = 500; ctx.body = {message: e} }
    })
    上下文：context 封装了 req res ❌ // 3、ctx.body 来设置响应体
- 第二遍 2025.3.13 -
❌ // 1、错误处理方式: Express - app.use((err,req,res,next)=>{res.status(500).send('err')})
	  // 错误处理方式: KOA2 try-catch 结合中间件实现
❌ // 2、上下文：Express res.send()/res.json() 都是基于 Node 底层 Response 的 res.end 的封装
- 第一遍 2025.3.5 -

// 2025-02 KOA2 中间件机制实现、路由处理、错误处理、模版引擎、源码
- 第三遍 2025.3.20 -
中间件机制实现：洋葱模型，先入栈-执行最里层的中间件-再依次出栈
function compose2(middlewares) {
    return (ctx, next) => {
        let index = -1;
        return dispatch(0);
        function dispatch(i) {
            if (i <= index) { return Promise.reject('multiple times') }
            ⭐️ // 少写了 index = i
            let fn = middlewares[i];
            if (!fn) { return Promise.resolve() }
            if (i === middlewares.length) { fn = next }
            try {
                const nextFunc = () => dispatch(i + 1);
                return Promise.resolve(fn(ctx, nextFunc))
            } catch (e) { Promise.reject(e) }
        }
    }
}
路由处理: KOA2 没有内置路由模块，使用 koa-router 实现 router.get('/cat', async (ctx) => {})
错误处理: app.use(async(ctx, next) => { 
    try{ await next() } catch(e) { ctx.status = 500; ctx.body = { message: 'err' } }
})
模版引擎:
ejs模版引擎  <% for %>，适合复杂模版，性能没那么好，需要编译再执行 js
art-template模版引擎 {}，代码简洁，有预编译，性能好，可以直接执行 js
源码
import http from 'http'
class KOA2 {
    constructor() {
        this.middlewares = [];
    }
    listen(...arg) {
        const server = http.createServer(this.callback());
        return server.listen(...arg)
    }
    use(fn) { this.middlewares.push(fn) } ⭐️ // 少写了 return this
    callback() {
        const fnCompose = compose(this.middlewares);
        return (req, res) => {
            const context = createContext(req, res); ⭐️ // 应该是 this.createContext 调用
            return fnCompose(context).then(() => response(context)).catch(e => ctx.onerror(e))
        }
    }
    createContext(req, res) {
        const ctx = Object.create(this.context);
        ctx.request = Object.create(this.request);
        ctx.response = Object.create(this.response);
        ctx.req = ctx.request.req = req;
        ctx.res = ctx.response.res = res;
        return ctx
    }
}
function response(ctx) {
    ctx.res.statusCode = ctx.status;
    ctx.res.end(ctx.body)
}
- 第二遍 2025.3.13 -
❌ // 1、index 初始值设置为 -1，否则 0 就相等抛出重复错误了
❌ // 2、执行中间件时，ctx 和 nextFunc 作为参数传入
❌ // 3、处理错误时，改变 ctx.status 和 ctx.body
❌ // 4、callback 执行中 少写了 return + catch 错误处理使用 ctx.onerror
❌ // 5、statusCode 是在原生 Reponse 上 ctx.res.statusCode
- 第一遍 2025.3.5 -
❌ // 1、KOA2 是基于 NodeJS 的 HTTP 中间件框架
❌ // 2、中间件写法：应该是 async 函数，async (ctx, next)=>{ await next() }
❌ // 3、如果重复执行，直接返回 Promise.reject(new Error('dup'))
❌ // 4、少写了 fn 不存在时，return Promise.resolve()
❌ // 5、KOA2 路由参数 ctx.params + 链接参数 ctx.query