cdg 金融科技面经

CDG金融科技面经核心问题及解答如下：

• var、let 和 const 区别

  var：存在变量提升，可重复声明，作用域为函数作用域或全局作用域。

  let/const：块级作用域，不可重复声明，存在暂时性死区（TDZ）。const 声明常量，必须初始化且不可重新赋值。

• call 和 apply 区别

  两者均用于改变函数执行时的 this 指向，并立即调用函数。

  call：参数逐个传递，如 func.call(context, arg1, arg2)。

  apply：参数以数组形式传递，如 func.apply(context, [arg1, arg2])。

• slice 和 splice 区别

  slice(start, end)：返回浅拷贝的新数组，不修改原数组，参数为索引范围。

  splice(start, deleteCount, ...items)：修改原数组，可删除/插入元素，返回被删除的部分。

• 箭头函数与普通函数区别

  this 绑定：箭头函数无自身 this，继承外层作用域的 this；普通函数 this 由调用方式决定。

  arguments 对象：箭头函数无 arguments，需用剩余参数（...args）替代。

  构造函数：箭头函数不可用作构造函数（无 prototype 属性）。

• 节流（throttle）与防抖（debounce）

  节流：固定时间间隔内最多执行一次（如滚动事件触发频率控制）。

  防抖：事件触发后延迟执行，若期间再次触发则重新计时（如搜索框输入联想）。

• setTimeout 0 和 Promise 执行顺序

  Promise 回调进入微任务队列，setTimeout 0 进入宏任务队列。微任务优先于宏任务执行，因此 Promise 先执行。

• 浏览器事件循环

  执行栈清空后，先处理微任务队列（如 Promise），再处理宏任务队列（如 setTimeout、setInterval）。

• HTTP 缓存

  强缓存：通过 Expires（绝对时间）或 Cache-Control（相对时间，如 max-age=3600）控制，直接使用本地缓存。

  协商缓存：通过 Last-Modified/If-Modified-Since 或 ETag/If-None-Match 校验资源是否更新，若未更新返回 304。

• HTTPS 握手过程

  客户端发送 ClientHello（支持协议版本、加密套件等）。

  服务端返回 ServerHello（选定协议版本、加密套件、证书）。

  客户端验证证书，生成随机数并加密发送给服务端。

  双方基于随机数生成会话密钥，后续通信使用对称加密。

• Cookie 与 Storage

  Cookie：

  容量小（约 4KB），随请求自动发送至服务端。

  可设置 domain（域名）、path（路径）限制作用范围。

  Storage：

  localStorage：持久化存储，需手动删除；sessionStorage：会话级存储，关闭标签页后清除。

  容量大（约 5MB），仅客户端使用，不随请求发送。

• localStorage 设置过期时间

  原生不支持过期机制，可通过封装实现：

  存储时记录时间戳（如 { data: value, expire: Date.now() + 30*24*60*60*1000 }）。

  读取时校验时间戳，若过期则删除并返回 null。

• Vue 与 React 区别

  响应式原理：Vue 使用 Object.defineProperty 或 Proxy 实现数据劫持；React 通过 setState 触发重新渲染。

  模板语法：Vue 支持单文件组件（.vue）和模板语法；React 使用 JSX。

  生态：Vue 官方库（如 Vuex、Vue Router）集成度高；React 生态更灵活（如 Redux、React Router）。

• useRef 与 useState 区别

  useState：触发组件重新渲染，用于管理状态。

  useRef：返回可变引用对象，修改其 current 属性不触发渲染，常用于存储 DOM 节点或持久化值。

• useEffect 使用场景

  执行副作用操作（如数据获取、订阅、手动修改 DOM）。

  可通过依赖数组控制执行时机：

  空数组：仅挂载时执行一次。

  特定变量：变量变化时执行。

• Webpack 与 Vite 区别

  Webpack：基于打包器，需完整构建依赖图，适合复杂项目但启动慢。

  Vite：基于原生 ESM，开发环境直接启动服务器，热更新快；生产环境使用 Rollup 打包。

• interface 与 type 区别

  interface：可扩展（通过 extends 或 declare 合并），主要用于对象类型定义。

  type：更灵活，支持联合类型、交叉类型、元组等，不可重复声明同名类型。

• Node.js 事件循环 vs 浏览器事件循环

  Node.js：

  分为多个阶段（如 timers、I/O callbacks、poll、check）。

  setImmediate 在 check 阶段执行，process.nextTick 在各阶段切换时优先执行。

  浏览器：仅微任务和宏任务队列，无阶段划分。

• Node.js 多线程处理请求

  通过 cluster 模块或 worker_threads 实现：

  cluster：主进程监听端口，子进程处理请求（利用多核 CPU）。

  worker_threads：共享内存的轻量级线程，适合 CPU 密集型任务。

• Web 安全：XSS 与 CSRF

  XSS：攻击者注入恶意脚本（如 <script>alert(1)</script>），防御措施包括输入过滤、CSP（内容安全策略）。

  CSRF：利用用户已登录的会话发起伪造请求，防御措施包括验证 Referer、使用 CSRF Token 或 SameSite Cookie 属性。

• 请求响应参数加密方案

  对称加密：如 AES，加密解密使用同一密钥，速度快但需安全传输密钥。

  非对称加密：如 RSA，公钥加密私钥解密，安全性高但性能较差。

  混合方案：用非对称加密传输对称密钥，再用对称加密传输数据。

• JWT 与 Cookie/Session 鉴权区别

  JWT：无状态， token 存储在客户端（如 localStorage），服务端无需存储会话信息。

  Cookie/Session：服务端存储会话信息，客户端通过 Cookie 传递会话 ID，适合需要频繁操作会话的场景。

• 嵌套对象键值 kebab-case 转 camelCase

  function kebabToCamel(obj) { if (typeof obj !== 'object' || obj === null) return obj; if (Array.isArray(obj)) return obj.map(kebabToCamel); const result = {}; for (const key in obj) { const camelKey = key.replace(/-(w)/g, (_, c) => c.toUpperCase()); result[camelKey] = kebabToCamel(obj[key]); } return result;}

• 判断子序列（LC392）

  function isSubsequence(s, t) { let i = 0, j = 0; while (i < s.length && j < t.length) { if (s[i] === t[j]) i++; j++; } return i === s.length;}