面试高频手撕题 | 73.实现JSON.stringify

1. 介绍实习经历，介绍项目；2. 聊实习时工作流程；3. 聊实习时最有意义的事情；4. 在项目中做了什么事情，怎么牵头的团队；5. webpack、vite深入；6. 怎么设计组件的？有哪些思路和注意点；7. js事件循环试题，注意点就是：构造函数、同步、宏任务、微任务(老生常谈)；8. css选择器权重；9. 手写Promise.all(秒了)。反问：1. 详细让面试官给我介绍业务；2. 工作流程(因为面试官问我了)；3. 技术栈。

一、面试基本情况本次面试主要围绕 React 相关技术、流式传输以及算法与 React Hook 实现展开，包含技术原理问答和两道代码实现题。二、技术问题回顾与解答1. React Router 的实现机制React Router 基于 HTML5 的 history API 实现单页面应用的路由功能。它通过监听浏览器的 popstate 事件（当用户点击浏览器的前进、后退按钮时触发）以及手动调用 history.pushState()、history.replaceState() 方法来更新 URL 地址，同时不触发页面刷新。在 React 组件中，通过 BrowserRouter（基于 history API）、HashRouter（基于 URL 的 hash 部分，兼容性更好）等组件包裹应用，结合 Route 组件定义不同路径对应的渲染组件。当 URL 变化时，React Router 会根据当前路径匹配相应的 Route 并重新渲染对应的组件，从而实现页面内容的更新 。不过在本次面试中，我对这块知识掌握不够扎实，未能完整清晰作答。2. React memo 是做了什么React.memo 是一个高阶组件，用于对函数式组件进行性能优化。它会对组件的 props 进行浅比较，如果前后两次传入的 props 浅比较结果相同，就直接复用之前渲染的结果，不再重新执行组件函数，从而避免不必要的重复渲染。但需要注意，它仅对 props 变化进行比较，当组件内部状态（如通过 useState 创建的状态）变化时，即使 props 未变，组件仍会重新渲染。3. React Suspense 怎么实现的React Suspense 用于处理组件的异步加载情况，让开发者可以指定在异步操作（如数据获取、动态导入组件）进行时显示的加载状态。它通过在组件树中标记一个“等待”区域，当子组件中有异步操作未完成时，会先渲染 Suspense 组件指定的 fallback 内容（如加载动画），直到异步操作完成，再渲染实际的子组件内容。内部实现依赖于 React 的 Fiber 架构，利用 Fiber 的可中断、可恢复特性，在等待异步操作完成期间释放 CPU 资源，不阻塞主线程，提高应用的响应性能 。4. 流式传输相关讨论在讨论流式传输时，我提出可以在前端利用 Server-Sent Events（SSE）实现。SSE 是一种单向的、由服务器向客户端推送数据的技术，适合用于实时数据传输场景。同时，对于 JSON 数据的处理，采用流式解析会更加高效，比如在处理阶乘等数据量较大且逐步生成的场景下，流式解析无需一次性将所有数据加载到内存中，而是边接收数据边解析处理，减少内存占用，提升数据处理效率。三、代码题实现1. 大数相减（考虑负数结果）function subtractLargeNumbers(num1, num2) {function compare(num1, num2) {if (num1.length > num2.length) return 1;if (num1.length < num2.length) return -1;for (let i = 0; i < num1.length; i++) {if (num1[i] > num2[i]) return 1;if (num1[i] < num2[i]) return -1;}return 0;}const sign = compare(num1.split(''), num2.split(''));let larger = sign >= 0? num1 : num2;let smaller = sign >= 0? num2 : num1;let result = '';let carry = 0;for (let i = 0; i < larger.length; i++) {let diff = parseInt(larger[larger.length - 1 - i]) - (parseInt(smaller[smaller.length - 1 - i]) || 0) - carry;if (diff < 0) {diff += 10;carry = 1;} else {carry = 0;}result = diff + result;}while (result[0] === '0' && result.length > 1) {result = result.slice(1);}return sign < 0? '-' + result : result;}2. 实现一个可暂停、继续的倒计时 React Hookimport { useState, useEffect } from'react';function useCountdown(initialTime) {const [time, setTime] = useState(initialTime);const [isRunning, setIsRunning] = useState(true);let intervalId;useEffect(() => {if (isRunning && time > 0) {intervalId = setInterval(() => {setTime(prevTime => prevTime - 1);}, 1000);} else {clearInterval(intervalId);}return () => clearInterval(intervalId);}, [isRunning, time]);const start = () => {setIsRunning(true);};const pause = () => {setIsRunning(false);};return {time,start,pause};

拷打项目： 用户登录页的逻辑实现账号密码怎么处理vite打包工具对图片做过哪些处理react的生命周期（react不熟……跳过了）css的水平居中ES6的数据类型Symbol有什么用Map集合有用过吗Object和Map有什么区别用过webpack吗什么是跨域、怎么解决开发过程中用过哪些数据单位、rem和px有什么区别

作为一个小白，没怎么经历过面试，内心真的非常紧张，分享一下面试云智的过程，一面（40min左右）：上来的话就是先做一下自我介绍，然后回答常见的八股，1. 常用的行内元素标签有哪些2.说说盒模型3.说说BFC是什么，有哪些特点4.position有几种取值，有什么区别5.flex 1什么意思6.水平居中的方法7.css选择器有哪些8.css权重的顺序9. css伪类和伪元素的区别10. js的数据类型有哪些，区别是什么11.判断数组的方法有哪些12.闭包，闭包使用不当会造成什么问题，如何防止闭包泄漏13.说说作用域链、事件循环14.深拷贝和浅拷贝的区别15. call、apply，bind三者的用法和区别16. 普通函数和箭头函数this指向问题17. 数组都有哪些方法18. 使用过AI？好像还有点.......但是忘记了，但都是日常的八股，感觉多多记忆都可以拿下接着就问了简历上项目相关的然后现场做了一道leetcode上面的经典题目，括号匹配（没做出来....）接着反问环节，公司主要技术栈，部分业务内容，以及对我在前端学习的一些建议等二面（15min）：二面的话本来以为没下文了，大概等了快大半个月，结果电话通知二面，估计是被捞起来的，上来就问了react相关的，1.  说说fiber是什么2. 说一下redux的原理3.问了一下日常有在使用AI？4. 项目相关的大致问了一下反问： 后续流程三面（60min）我原本以为是两轮技术面＋一轮HR面，结果第三轮也是技术面，两个面试官一起发力，也是被拷打了很久，问的问题大多是根据你的简历上的技术栈来问的，上来做自我介绍，大家可以提前准备好属于自己的自我介绍，给面试官留下好印象1.vue和react的区别？2.redux的原理，以及让你来实现一个redux，你会怎么做？3. 说说webpack的原理4.Git 和SVN有什么区别？5. Axios解决了什么问题？6. https的原理7.前端发展过程中相关的开放性问题，有点忘记了8. 还是关于AI的问题？以及你用AI如何解决实际开发中遇到的问题，举个例子9. 闭包、原型链、事件循环10.性能问题有哪些方法去检测，我回答的是用lighthouse（还有好多种），然后问了指标有哪些，FCP，LCP，TTI等相关的解释等11.项目中让你最自豪的点是什么？12.JavaScript作为单线程，区别于其他语言的多线程，这样设计的优势在哪里？还有就是一些开放性的问题，有点记不太清了，然后就是聊聊项目，根据你简历上的项目会提出一些问题。反问：后续流程HR面试（30min）介绍了一下所在部分的业务，问了自己的职业规划，以及能实习多久，还有一些其他开放性问题等等反问：后续流程