今天距离入职美团即将三个月了，对这三个月做一些简单的总结。内容为实习工作中的一些感受，非生活体验。1、要有一定的自学能力。因为在实习期间，你的mt以及同事肯定都会比较忙，因此自己要善于发现一些有价值的文档，项目等，并且从这些文档中吸收，学到属于自己的东西 进而提升自己。2、要善于提炼问题并提问。在自己学习或者做需求的过程中，要学会发现并提出问题，有不懂的地方及时的去提问，这无疑是效率最高的方法。不用担心自己提出的问题是否很低级，其他人并不会在意这一点，所以，大胆问就好。3、要及时进行记录。无论是在自学还是工作的过程中，遇到有价值的东西，一定要及时的记录下来，你无法保证一定不会忘记。记录下来后，不论是后面进行复盘还是写简历，肯定都会有较大的帮助（毕竟我们实习的一个重要目标就是丰富我们的简历～）。4、总结认知迭代。这个词也是我入职美团第一次听到的（部门要求新人每天要撰写日报），所谓认知迭代，就是在不断的提升自己认知的过程。就像同一本书，每读一遍都会有不同的感受。工作也一样，对于组内的业务，随着接触的多了，对其认知也会不一样（所以个人觉得写日报并不是一件坏事，可以及时的进行总结）。5、要学会与他人沟通。（这个我也没学会，平时很多时候需要其他同事配合工作的地方，要么就是已读不回，要么就是回了但不实施，头大   大家有什么好方法也可以分享一下）暂时写到这里，最后24年快要过去了，祝大家在即将到来的2025年都能有满满的收获，拿到想要的offer

从今年的8月1日到今天，128天。 也许是缘分，从建军节开始，参过军的我，又开始了另一场作战。 如何用一句话描述我的状态呢，每天早晨起来都伴随着一个半醒的身体和半醒的灵魂，漂浮的走进洗手间，试图用温润的水流冲走前一天的疲惫和油腻，伴随着头发和污渍一起流下，就好像太阳从海里洗出来的一样，清新而炽烈，至少对那个时候的我来说，是这样的。一、写文章前的思考 其实在正式叙事之前，我有必要说明一下，我的观念和大部分人可能是不一样的，烦请大家用旁观者的眼光看待这篇文章。 其实我有想过要不要以大众的思维去写这篇，后来想想还是抒发最真实的想法吧，毕竟如果不是真实感受，没必要写了对吧。二、...

很多同学在学校里写玩具写习惯了，如果在实际工程开发中，有一些需要额外注意的点。多关注一下边界值的一些展现形态例如一个弹窗或者提示区的内容是通过后端获取的，需要确定获取失败时展示，和待加载时的交互和展示态，必须要让用户在点击按钮时触发loading来知道系统已经进入处理阶段，同时可以在请求返回结果前禁用按钮，否则用户可能会多次进行点击触发多次请求。如果你想写一个列表/表格，那么首先考虑的就是分页问题，如果这个列表是通过查询得来的，那么应该考虑防抖节流的问题。如果这个列表可以通过tab去切换，那么你必须要处理用户同时点击多个tab的情况，需要保证最后列表所展示的是用户最后点击的tab。如果列表项展示的是string，那么需要考虑其展示逻辑，比如说数字的精度，文字的长度，访问具体字段时，是否有可能在undefined或者null上取值触发报错。在取tab项特殊code的时候，建议使用枚举来避免硬编码，这样便于case值发生更改值不用进行查找和一个个替换。1. 异步数据加载与交互状态管理弹窗、提示区、列表、表格等组件，涉及到后端数据获取时，可能出现以下几种情况：异步请求失败时的展示错误展示：当数据获取失败时，要确保用户能收到明确的错误信息。可以展示友好的错误提示（例如：网络错误、服务器错误等），并给用户重试的选项。if (error) {  return 加载失败，请重试。;}状态反馈：对于请求失败的场景，可以使用不同的状态反馈机制，如“重试”按钮，或在弹窗中显示一个带有错误信息的图标。待加载时的交互和展示Loading 状态：在数据请求期间，使用 loading 指示器让用户知道数据正在加载。这可以是一个旋转的加载动画、进度条或其他交互提示。确保用户能在点击按钮后看到反馈，避免因延迟而不清楚系统状态。return loading ?  : ;占位符：展示内容之前，可以使用占位符（Skeleton loader）来模拟数据加载的过程，提升用户体验。jreturn loading ?  : ;2. 分页与防抖、节流当处理分页或动态列表时，尤其是涉及到异步查询和用户操作时，有很多细节需要注意。分页处理分页状态管理：如果列表的数据量较大，需要考虑分页功能，避免一次性加载所有数据，减少性能压力。分页信息（如当前页码、每页条数）需要存储在状态中，并确保在分页时正确更新列表。UI 提示：在分页加载时，要考虑为用户提供页码信息、加载提示以及分页的上一页/下一页控制。防抖与节流防抖：用户在分页、查询、搜索等操作时，可能频繁触发请求，这时候需要使用防抖（Debounce）来延迟请求，避免每次输入都发送请求，提升性能。const handleSearch = debounce((query) => {  // 发起搜索请求}, 300);节流：对于频繁的事件（如滚动、窗口尺寸变化等），使用节流（Throttle）可以限制事件触发频率，减少不必要的请求和计算。const handleScroll = throttle((event) => {  // 处理滚动事件}, 200);3. Tab 切换与并发操作如果一个页面有多个 tab 选项，切换 tab 后，可能会引发一些需要特别处理的交互问题。多 Tab 切换的防冲突处理当前选中 Tab 管理：每次切换 Tab 时，确保最新的 tab 选项保持为当前选中状态，避免数据错误。通过 useState 管理当前选中的 tab。避免并发请求冲突：如果多个 Tab 触发了并发请求，需要确保最后请求返回的数据被正确展示，并避免数据的乱序展示。可以通过 useEffect 中的依赖数组和状态管理来确保数据更新正确。const [activeTab, setActiveTab] = useState(0);const [data, setData] = useState([]);useEffect(() => {  fetchDataForTab(activeTab);}, [activeTab]);4. 列表项展示和字段安全当展示列表项时，需要注意以下一些常见问题：数字精度处理浮点数精度：当列表项显示数字时，特别是涉及到金额、百分比等精确数据时，确保精度正确，避免浮动误差。js 代码解读复制代码const formatNumber = (num) => num.toFixed(2);文字长度与显示文字超长处理：长文本需要进行处理，避免溢出或布局错乱。可以使用 CSS 的 text-overflow: ellipsis 来截断过长文本，或者根据需要动态生成可展开的省略符。.text-container {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}字段访问的安全性访问 undefined 或 null 时避免错误：在访问嵌套对象的属性时，必须考虑属性可能为 undefined 或 null 的情况。可以使用可选链 ?. 来避免错误，或者进行显式的 null 检查。js 代码解读复制代码const userInfo = user?.address?.street || "未知";5. 枚举与常量使用对于一些固定的状态、类型、选项等值，建议使用枚举或常量来避免硬编码，提升代码可维护性和可读性。Tab 选项枚举当 tab 项目较多时，使用枚举（Enum）来管理常量值，避免频繁修改字符串或值：const TabTypes = {  GENERAL: 'general',  DETAILS: 'details',  SETTINGS: 'settings'};const [activeTab, setActiveTab] = useState(TabTypes.GENERAL);避免硬编码对于一些特定的状态、分类值等，应该将其提取为常量或枚举，使得代码更易维护。const Status = {  SUCCESS: 'success',  ERROR: 'error',  PENDING: 'pending'};6. 用户输入验证与防止恶意输入在处理用户输入时，尤其是表单数据、搜索框等，需要做好输入验证和数据清洗。输入长度限制与格式检查输入长度限制：确保输入内容不超长，避免界面布局或性能问题。使用前端验证和后端验证双重保障。if (input.length > 100) {  alert("输入过长，请限制在100字符以内");}防止 SQL 注入和 XSS 攻击防止 XSS：如果用户输入的内容会直接渲染到页面中，要做相应的转义处理，避免恶意脚本的执行。const escapeHtml = (str) => {  const element = document.createElement('div');  if (str) element.innerText = str;  else element.textContent = str;  return element.innerHTML;};7. 键盘和触摸事件支持键盘操作支持：特别是在移动端或有特殊需求的项目中，考虑键盘交互（如 Enter 键提交、Esc 键关闭弹窗等）。useEffect(() => { const handleKeyDown = (e) => {    if (e.key === 'Escape') {      closeModal();    }  };  window.addEventListener('keydown', handleKeyDown); return () => {    window.removeEventListener('keydown', handleKeyDown);  };}, []);触摸事件支持：对于触摸屏设备，考虑替换或支持触摸事件，如 touchstart, touchend，以及确保页面在触摸设备上的交互流畅。8. 滚动和加载更多对于长列表、无限滚动等情况，需要优化滚动和加载行为。滚动加载更多检测滚动位置：当用户滚动到页面底部时，触发更多数据的加载。可以结合节流来减少滚动事件的触发频率。const handleScroll = () => {  if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {    // 加载更多数据  }};#前端# #实习##ai智能作图#

面经：1. 多线程打印整数2.链表合并3.写一个生产者消费者模型：思路 wait() 和 notify() 方法来实现4.sql题：求和 排序 分页2024.6.20一面项目拷打。之前做的没什么难度，问项目难点，说了我觉得是难点的东西，但是其实解决了也没有多难，但是还是要说八股文：Java的异常体系为什么要有异常finally（这个面试官追问，你确定他会不管怎么样都会执行吗？为什么）深拷贝浅拷贝深拷贝的应用场景数据库索引索引的数据结构什么数据库用了哈希索引mysql数据库的索引结构B树的特点索引失效的场景git的常用指令git mergelinux:查询cpu利用率最高的进程linux:查询日...