美团-零售-秋招 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: 本次面试主要考察前端基础知识,包括数据结构、网络协议、操作系统、JavaScript、CSS、React以及算法等方面。 本轮共 12 道题。答案默认折叠,便于先自行作答。 1. 数组和链表的区别,读取 和 删除 的时间复杂度 题目要点 数据结构基础:考察对数组和链表这两种基本数据结构概念的理解,包括它们的存储方式和特点。 时间复杂度分析:评估数据结构在不同操作下的性能表现,这是衡量算法效率的关键指标。 参考答案 1.1 原理说明 数组:数组是一种将元素存储在连续内存空间中的数据结构。它通过索引来直接访问任意元素,因为所有元素的大小相同且物理地址连续,可以通过首地址和索引计算出元素的确切位置。 链表:链表是一种将元素存储在非连续内存空间中的数据结构。每个元素(称为节点)包含数据本身以及指向下一个元素的指针(或引用)。节点之间通过这些指针逻辑上连接起来,但不要求物理上连续。 联系与区别:数组和链表都是线性数据结构,用于有序地存储和组织数据。它们的主要区别在于内存的物理存储方式和由此带来的对元素访问、插入、删除操作的效率差异。数组支持随机访问,而链表只能顺序访问。 为什么会出现这个技术需求或问题:不同的数据存储和操作场景对数据结构有不同的性能要求。当需要快速随机访问数据时,数组由于其连续存储特性表现更优;而当需要频繁地进行插入和删除操作时,链表由于其灵活的指针连接方式,避免了大量元素移动,因此效率更高。 1.2 核心用法 + 示例代码 读取操作: 数组:通过索引直接访问元素,时间复杂度为 O(1)。无论数组大小,访问任何元素所需时间都是恒定的。 const arr = [10, 20, 30, 40, 50]; console.log(arr[2]); // 输出 30,直接访问,时间复杂度 O(1) 链表:必须从链表的头部节点开始,沿着指针逐个遍历,直到找到目标元素。因此,时间复杂度为 O(n),其中 n 是链表的长度。在最坏情况下,需要遍历整个链表。 class Node { constructor(val) { this.val = val; this.next = null; } } const head = new Node(10); head.next = new Node(20); head.next.next = new Node(30); let current = head; while (current && current.val !== 30) { current = current.next; } console.log(current ? current.val : 'Not found'); // 输出 30,需要遍历,时间复杂度 O(n) 删除操作: 数组:删除数组中的某个元素后,为了保持内存的连续性,其后的所有元素都需要向前移动以填补空缺。这个移动操作的时间复杂度为 O(n)。 const arr = [1, 2, 3, 4, 5]; arr.splice(2, 1); // 删除索引为2的元素(即3),后续元素(4, 5)前移,时间复杂度 O(n) console.log(arr); // 输出 [1, 2, 4, 5] 链表:如果已知要删除节点的前一个节点,删除操作只需要修改前一个节点的指针,使其指向被删除节点的下一个节点。这个操作的时间复杂度为 O(1)。如果需要先查找再删除,则总时间复杂度为 O(n)(查找的开销)。 // 假设我们有一个链表 1 -> 2 -> 3,我们要删除值为 2 的节点 // 模拟找到值为 1 的节点 (prevNode) 和值为 2 的节点 (nodeToDelete) let headDelete = new Node(1); let node2 = new Node(2); let node3 = new Node(3); headDelete.next = node2; node2.next = node3; let prevNode = headDelete; // 值为 1 的节点 let nodeToDelete = node2; // 值为 2 的节点 prevNode.next = nodeToDelete.next; // 将 1 的 next 指向 3,时间复杂度 O(1) // 现在链表变为 1 -> 3 优势总结: ...

August 4, 2025

美团-打车-校招 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: 本次面试主要考察前端基础、框架原理以及性能优化等方面的知识。 本轮共 26 道题。答案默认折叠,便于先自行作答。 1. 1. 项目的难点与亮点是什么? 题目要点 说明该题是主观型问题,不考"唯一标准答案"。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议:首先简述项目背景,接着阐述难点(遇到的问题、如何解决、技术选型考量),再说明亮点(创新点、技术深度、业务价值),最后进行总结和反思。 参考答案 我们团队在开发 XXX 项目时,有一个核心模块是 YYYY。这个模块的主要难点在于需要处理高并发的数据同步和复杂的权限控制逻辑。具体来说,我们面临的挑战包括: 高并发数据同步:在某个特定场景下,用户操作会导致大量数据实时更新,并且这些更新需要快速同步到多个客户端。初期方案在压力测试时出现了明显的延迟和数据不一致问题。 解决思路:我们分析了瓶颈,发现是由于频繁的数据库写入和全量数据推送导致的。经过讨论,我们最终选择了基于 WebSocket 实现增量数据推送,并引入了消息队列(Kafka)来削峰填谷,后端对数据进行聚合后再批量写入。在前端,我们设计了一个轻量级的数据缓存层,只在接收到增量更新时局部刷新UI,大大减少了DOM操作。 技术权衡:我们对比过轮询、长轮询等方案,但它们在实时性和资源消耗上都不如 WebSocket 配合增量更新。虽然引入消息队列和 WebSocket 增加了系统复杂度,但在百万级并发场景下,它提供了更优的性能和更低的资源占用。 复杂的权限控制:系统需要支持多维度、细粒度的用户权限,包括不同角色对数据和功能的访问权限,并且权限配置是动态可变的。 解决思路:我们设计了一套基于 RBAC(Role-Based Access Control)的权限模型,但在前端实现时,为了避免每次操作都去后端校验权限,我们引入了前端权限路由守卫和组件级权限指令。在用户登录时,后端会返回一个精简的权限列表,前端根据这个列表动态生成菜单、路由,并控制组件的可见性及交互。 技术权衡:这种前后端结合的权限控制方式,兼顾了安全性和用户体验。虽然前端增加了权限逻辑处理,但减少了不必要的后端请求,提升了页面响应速度。我们还考虑过将权限完全放到后端控制,但那样会导致频繁的网络请求,用户体验会下降。 项目的亮点主要体现在两个方面: 技术深度与创新:我们引入的 WebSocket + Kafka 的实时数据同步方案,有效地支撑了高并发场景下的数据一致性和实时性要求,这是项目在技术上的一大突破。此外,我们还自主研发了一套可视化配置工具,让业务人员可以灵活配置数据同步规则,极大地提高了运营效率。 业务价值与用户体验提升:通过解决上述难点,我们成功将核心页面的数据实时同步延迟从平均 5 秒降低到 500 毫秒以内,用户在操作时的卡顿感几乎消除,大幅提升了用户满意度。同时,权限系统的灵活配置也让业务扩展变得更加便捷,支持了新业务的快速上线。 在整个过程中,我们团队通过深入分析、多方案对比和持续优化,不仅攻克了技术难点,也为业务带来了实际的价值。这次经历让我对高并发系统设计和复杂权限管理有了更深刻的理解,也锻炼了我在权衡技术方案和解决实际问题方面的能力。 2. 2. 解决难点时,是否对比过多种方案?最终选择的方案有何权衡? 题目要点 说明该题是主观型问题,不考"唯一标准答案"。 面试官主要考察答题者解决问题的思路、方案对比能力、技术选型和权衡能力,以及对项目实际情况的理解。 答题结构建议:首先选择一个具体的项目难点,围绕该难点,阐述曾考虑的多种解决方案,对比它们的优劣(技术、成本、风险等),最终说明选择当前方案的理由及权衡过程,并可提及后续优化方向。 参考答案 在我的前端项目中,曾遇到一个挑战,就是如何高效地管理和渲染大规模的动态表单。传统的方案是直接通过 JSON 配置动态生成表单项,但这在表单项过多、层级嵌套复杂时,会导致渲染性能下降,并且表单校验逻辑难以统一管理。 当时我们主要对比了以下几种方案: 方案一:纯粹的 JSON Schema 驱动,一次性渲染 优点:配置简单直观,后端可以方便地控制表单结构。 缺点:对于包含上百个字段甚至更多字段的复杂表单,一次性渲染会导致首次加载时间过长,页面卡顿。当表单数据频繁变化时,DOM 更新开销大,用户体验差。 权衡:虽然开发成本低,但性能瓶颈明显,不适用于我们目标中的大型复杂表单。 方案二:基于组件化和局部更新 ...

August 4, 2025

阿里巴巴-社招-5年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: React 生命周期、react hooks、JSX、react 渲染机制、React函数组件更新、react 组件设计模式 本轮共 38 道题。答案默认折叠,便于先自行作答。 1. 你参与的主要项目是什么?是桌面端还是移动端项目 题目要点 略 参考答案 略 2. 在项目中主要使用了哪些技术栈 题目要点 略 参考答案 略 3. 你对 Vue 有多少了解 题目要点 Vue 是数据驱动 + 响应式的组件化框架,适合快速构建中大型项目 熟悉其核心机制:响应式原理、组件生命周期、指令语法、虚拟 DOM 掌握 Vue Router、Vuex/Pinia 等配套生态工具 能区分并熟练使用 Vue 2 和 Vue 3 的开发模式 具备优化性能、提升可维护性的工程意识 参考答案 一、考察点 探查候选人对 Vue 核心原理、语法机制的理解深度 判断是否具备实战经验、组件开发能力、性能优化能力 涵盖响应式系统、组件通信、生命周期、指令系统、虚拟 DOM、Diff 等关键技术点 Vue 生态栈是否熟悉,如 Vue Router、Vuex / Pinia、Composition API、Vue 3 升级等 二、参考答案 2.1 Vue 框架的整体认知 Vue 是一个 轻量、渐进式的前端框架,核心关注 View 层,易学易用,适合快速开发中大型应用 支持响应式绑定、组件化开发、指令系统、虚拟 DOM、跨平台(如 H5、小程序) Vue 的核心组成包括: ...

July 28, 2025

阿里巴巴-社招-3年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: react 事件机制、React 生命周期、state 与 props 本轮共 13 道题。答案默认折叠,便于先自行作答。 1. 实现全屏水平垂直居中、宽高为屏幕宽度一半的正方形 题目要点 利用 vw 单位定义宽高,保证正方形且相对视口大小 Flexbox 和绝对定位 + transform 是常用居中方案 重置默认 margin 和设置容器高度保证布局准确 任选方案均可,Flexbox 代码简洁,绝对定位兼容性好 参考答案 一、考察点 掌握 CSS 布局基础知识 熟悉视口单位(vw、vh)的使用 理解水平垂直居中多种实现方式 了解盒模型和尺寸计算 二、参考答案 2.1 需求分析 元素宽度和高度为屏幕宽度的 50%(即 50vw) 元素是正方形,宽高相等 水平和垂直方向均居中显示 兼容主流现代浏览器 2.2 代码实现示例 方法一:使用 Flexbox <div class="container"> <div class="square"></div> </div> <style> html, body, .container { margin: 0; height: 100vh; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } .square { width: 50vw; height: 50vw; /* 保证正方形 */ background-color: #4CAF50; } </style> 方法二:使用绝对定位 + transform <div class="square"></div> <style> .square { position: absolute; top: 50%; left: 50%; width: 50vw; height: 50vw; background-color: #2196F3; transform: translate(-50%, -50%); } html, body { margin: 0; height: 100vh; } </style> 2.3 说明 50vw 表示视口宽度的一半 Flexbox 方案利用容器的弹性布局实现简单居中 绝对定位方案通过 top:50%, left:50% 定位中心点,再用 transform 修正偏移 两种方案均保证元素在视口中央且尺寸为屏幕宽度一半的正方形 三、常见误区或面试陷阱 忽略 viewport 单位,使用百分比 % 宽高导致高度受父元素限制 使用 margin: auto 只实现水平居中,未垂直居中 transform 偏移值写错方向或单位 未重置 html, body 的 margin 和高度,导致布局异常 2. 如何通过 padding-bottom 实现自适应正方形 题目要点 百分比 padding-bottom 是相对于元素宽度计算的 设置宽度,padding-bottom 等于宽度比例即可实现宽高比 纯 CSS 实现响应式正方形,无需 JS 计算 配合 position 及 transform 可实现内部内容居中 参考答案 一、考察点 理解 CSS 盒模型及百分比 padding 的计算规则 熟悉通过内边距(padding)比例实现自适应高度的布局技巧 掌握纯 CSS 无需固定高度实现宽高比控制的方法 了解响应式设计及视口适配相关概念 二、参考答案 2.1 核心原理说明 百分比 padding 的高度计算基于元素的宽度 例如,padding-bottom: 100% 表示内边距底部高度是元素自身宽度的 100% 利用这一特性,设置一个元素的宽度,然后用 padding-bottom 来控制高度,从而实现固定宽高比(正方形为 1:1) 这种方式不依赖固定高度或 JS,纯 CSS 实现响应式正方形 2.2 具体实现方式 <div class="square"></div> <style> .square { width: 50vw; /* 宽度为视口宽度的一半 */ padding-bottom: 50vw; /* 内边距底部为宽度的 100%,实现高度与宽度相等 */ background-color: #f60; position: relative; /* 便于放置绝对定位内容(如文字) */ } /* 如果需要内部内容绝对居中,可添加: */ .square > .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> 2.3 使用场景 自适应正方形容器 图片或视频占位框 响应式卡片、图标区域布局 三、常见误区或面试陷阱 误以为 padding 百分比是基于高度计算(实际上是基于宽度) 忽略内容本身不占高度,需要通过 position: relative 和绝对定位解决内容布局 没有设置元素的 width,导致 padding 计算无意义 使用固定 height 反而破坏响应式效果 3. 若要求正方形内嵌图片保持比例且不拉伸,如何实现 题目要点 容器用 padding-bottom 创建自适应正方形 图片使用 object-fit: contain 保持比例且不拉伸 绝对定位图片居中显示,宽高100%填充容器 设置 overflow: hidden 避免溢出 参考答案 一、考察点 理解图片的默认渲染行为及尺寸适配 掌握 CSS 中图片等媒体对象的缩放控制属性(object-fit) 熟悉容器布局,确保图片在固定宽高正方形内自适应显示 了解响应式设计和兼容性考虑 二、参考答案 2.1 核心概念说明 图片默认行为:图片按原始宽高比显示,若强制设置宽高可能导致变形 object-fit 属性:用于控制替换元素(如 img、video)内容的填充方式 object-fit: contain 保持图片比例,完整显示,可能留空白 object-fit: cover 保持比例,填满容器,超出部分裁剪 结合容器尺寸和 object-fit 可灵活控制图片展示效果 2.2 具体实现示例 <div class="square"> <img src="your-image.jpg" alt="示例图片" /> </div> <style> .square { width: 50vw; padding-bottom: 50vw; /* 自适应正方形 */ position: relative; overflow: hidden; /* 防止图片溢出 */ } .square img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: contain; /* 保持比例且不拉伸 */ transform: translate(-50%, -50%); } </style> 2.3 说明 使用 padding-bottom 创建正方形容器 position: relative + position: absolute 定位图片,方便居中 图片宽高设为 100%,配合 object-fit: contain 保持原始比例且不被拉伸 overflow: hidden 防止图片超出容器边界显示 可根据需求改为 object-fit: cover 实现填充并裁剪效果 三、常见误区或面试陷阱 不设置 object-fit,直接用 width 和 height 100%,图片可能被拉伸变形 忽略容器定位,导致图片无法居中或布局错乱 未设置 overflow: hidden,图片溢出影响页面布局 误用 background-image 和 background-size,与 img 标签区别不清 4. 怎么理解回流跟重绘?什么场景下会触发? 题库原题:怎么理解回流跟重绘?什么场景下会触发? ...

July 28, 2025

阿里巴巴-社招-2年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: react hooks、WeakMap 和 WeakSet 本轮共 12 道题。答案默认折叠,便于先自行作答。 1. ES6相关属性都用过那些 题目要点 熟悉 ES6 关键新特性和语法糖 了解特性设计目的,提升代码可维护性和性能 结合项目场景合理运用,避免滥用带来的副作用 使用 ESLint 及 Babel 保证兼容性和规范 参考答案 一、考察点 全面了解 ES6(ECMAScript 2015)新特性 掌握模块化、变量声明、函数、对象、数组、字符串、类、Promise 等核心特性 能说明特性使用场景、优势及与旧版本对比 具备在项目中合理应用 ES6 特性的能力 二、参考答案 1.1 变量声明 let 和 const:块级作用域,解决 var 变量提升和重复声明问题 推荐使用 const 声明常量,let 声明可变变量,避免全局污染 1.2 模板字符串(Template Literals) 使用反引号 ` 支持多行字符串和内嵌表达式 ${expr} 替代传统字符串拼接,提升可读性 1.3 解构赋值(Destructuring) 支持数组和对象解构,简化变量赋值 常用于函数参数处理、数据提取 1.4 箭头函数(Arrow Functions) 简洁函数表达式,自动绑定 this 不可作为构造函数,不绑定 arguments 常用于回调和函数简写 1.5 扩展运算符(Spread)和剩余参数(Rest) 扩展运算符 ... 用于数组和对象展开 剩余参数用于函数参数收集 1.6 对象字面量增强 属性简写、方法简写、计算属性名 支持简洁声明和动态键名 1.7 类(Class) ES6 引入基于原型的语法糖,支持继承、构造函数、静态方法 提升面向对象编程体验 1.8 Promise 和异步编程 用于异步流程控制,解决回调地狱 支持链式调用和错误捕获 1.9 模块(Module) import 和 export 语法,支持静态分析和按需加载 替代传统的 CommonJS、AMD 模块规范 1.10 Symbol 类型 新增基本类型,表示独一无二的值 常用于定义对象的私有属性和常量 1.11 Set 和 Map 数据结构 Set:无重复元素集合 Map:键值对集合,键可以是任意类型 1.12 Iterator 和 Generator 统一遍历接口 Generator 生成器函数,用于异步流程和惰性计算 1.13 其他 for...of 循环:遍历可迭代对象 默认参数和函数参数尾逗号 数组新增方法如 Array.from、find、findIndex 三、常见使用场景及优势 特性 使用场景 优势与改进点 let/const 代替 var,块级作用域变量声明 避免变量提升和作用域污染 模板字符串 拼接复杂字符串和多行文本 可读性高,减少错误 解构赋值 参数提取、数组拆包、函数返回值拆分 代码简洁,语义清晰 箭头函数 回调函数、简化函数定义 自动绑定 this,代码更短 扩展运算符 数组合并、对象拷贝 简化代码,避免手动循环 Promise 异步请求、链式调用 解决回调地狱,增强异步流程可读性 模块化 项目拆分、代码复用 标准化模块,支持静态分析 Set/Map 需要高效查找、去重、键值映射的场景 性能优于传统对象和数组 四、常见误区或面试陷阱 ❌ 误区一:滥用箭头函数导致 this 绑定错误 不适合需要动态 this 的场景(如对象方法) ❌ 误区二:未充分利用解构赋值,写出冗长代码 理解解构赋值提升代码清晰度 ❌ 误区三:Promise 误用未捕获异常,导致异常丢失 应正确使用 .catch 或 try...catch 包裹 async/await 2. 为什么WeakMap的键必须是对象 题目要点 WeakMap 键必须是对象,因为弱引用机制只能作用于对象 对基本类型无法进行弱引用,无法参与垃圾回收机制 WeakMap 设计用于保存对象私有数据,避免内存泄漏 与普通 Map 区别在于弱引用和不可枚举特性 参考答案 一、考察点 理解 WeakMap 的设计初衷和底层实现机制 掌握 WeakMap 与普通 Map 的区别 了解 JavaScript 垃圾回收机制与弱引用的关系 能说明 WeakMap 键限制为对象的技术原因及应用场景 二、参考答案 1.1 WeakMap 的基本概念 WeakMap 是一种键为对象,值任意的数据结构 与普通 Map 不同,WeakMap 对键对象的引用是“弱引用” 当键对象不存在其它引用时,能被垃圾回收器回收,避免内存泄漏 1.2 键必须是对象的原因 1)弱引用必须指向对象 JavaScript 的弱引用机制只能对对象类型生效 基本类型(如字符串、数字)是值类型,无法被弱引用追踪和回收 2)垃圾回收机制要求 只有对象才存在垃圾回收标记和生命周期管理 WeakMap 通过弱引用允许键对象在无外部引用时自动回收 如果允许基本类型作为键,则无法做到弱引用,违背 WeakMap 设计初衷 3)设计意图和使用场景 用于存储与对象相关联的私有数据,避免内存泄漏 例如框架中保存某个 DOM 节点的元数据,DOM 节点销毁时对应数据自动释放 1.3 WeakMap 与 Map 的区别 特性 Map WeakMap 键类型 任意类型 只能是对象 是否可枚举 可遍历所有键值 不可遍历 引用强度 对键保持强引用,阻止垃圾回收 对键保持弱引用,不阻止垃圾回收 适用场景 普通键值映射 关联对象私有数据,自动回收 1.4 常见误区或面试陷阱 ❌ 误区一:认为 WeakMap 可以用基本类型作为键 会导致运行时错误,WeakMap 只能接受对象作为键 ❌ 误区二:误用 WeakMap 导致内存泄漏 忽略 WeakMap 不可遍历特性,误判数据存在与否 3. Map支持哪些非对象键 题目要点 Map 支持所有基本类型和对象作为键 包括字符串、数字、布尔值、Symbol、null、undefined 与 WeakMap 只能用对象键不同,Map 更灵活 理解键类型和对应的行为差异,避免键冲突 参考答案 一、考察点 理解 JavaScript Map 的键类型及其存储机制 掌握 Map 与 WeakMap 键的差异 了解基本类型和对象类型作为键的行为和区别 能说明非对象键在 Map 中的实际使用场景 二、参考答案 1.1 Map 键的类型支持 Map 的键可以是任意值,包括基本类型和对象类型 ...

July 28, 2025

阿里巴巴-社招-1年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: Webpack与Vite、事件循环、跨域通信 本轮共 16 道题。答案默认折叠,便于先自行作答。 1. 项目中遇到了哪些技术难题,是如何解决的 题目要点 STAR法则 参考答案 略 2. 在解决这些技术难题的过程中,有没有尝试过其他解决方案 题目要点 略 参考答案 略 3. 项目中是如何进行团队协作的 题目要点 略 参考答案 略 4. 在团队协作中,有没有遇到过沟通不畅或者意见不合的情况?是如何解决的 题目要点 略 参考答案 略 5. webpack 的 plugin 了解吗 题目要点 Plugin 是 Webpack 扩展机制,贯穿构建全过程 核心结构是类 + apply(compiler) + Tapable 钩子 常见生命周期钩子:compile、emit、done 等 可用于注入变量、分析构建、生成资源、操作产物等 熟悉 compiler 与 compilation 的概念 可结合实际项目经验举例说明插件使用场景 参考答案 一、考察点 是否理解 Plugin 在 Webpack 中的作用和工作机制 Plugin 是 Webpack 最核心的扩展机制之一 是否掌握编写 Plugin 的基本方法和生命周期 了解 compiler、compilation、钩子(hooks)等概念 能否结合实际项目场景说明使用插件的案例和目的 ...

July 28, 2025

滴滴-社招-5年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: 作用域链与闭包、全方位解读this、函数柯里化、原型链与继承、DOM操作、深拷贝/浅拷贝、call、apply和bind 本轮共 24 道题。答案默认折叠,便于先自行作答。 1. 深拷贝浅拷贝有什么区别?怎么实现深拷贝? 题库原题:深拷贝浅拷贝有什么区别?怎么实现深拷贝? 题目要点 JS数据类型分别基本数据类型和引用数据类型,基本数据类型保存的是值,引用类型保存的是引用地址(this指针)。 浅拷贝共用一个引用地址,深拷贝会创建新的内存地址。 浅拷贝方法 直接对象复制 Object.assign 深拷贝 JSON.stringify转为字符串再JSON.parse 深度递归遍历 参考答案 一、数据类型存储 前面文章我们讲到,JavaScript中存在两大数据类型: 基本类型 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中 二、浅拷贝 浅拷贝,指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝 如果属性是基本类型,拷贝的就是基本类型的值。如果属性是引用类型,拷贝的就是内存地址 即浅拷贝是拷贝一层,深层次的引用类型则共享内存地址 下面简单实现一个浅拷贝 function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){ newObj[prop] = obj[prop]; } } return newObj; } 在JavaScript中,存在浅拷贝的现象有: Object.assign Array.prototype.slice(), Array.prototype.concat() 使用拓展运算符实现的复制 Object.assign var obj = { age: 18, nature: ['smart', 'good'], names: { name1: 'fx', name2: 'xka' }, love: function () { console.log('fx is a great girl') } } var newObj = Object.assign({}, obj); slice() const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.slice(0) fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] concat() const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.concat() fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] 拓展运算符 const fxArr = ["One", "Two", "Three"] const fxArrs = [...fxArr] fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] 三、深拷贝 深拷贝开辟一个新的栈,两个对象的属性完全相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性 ...

July 28, 2025

滴滴-社招-3年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: z-index、布局技巧、Flexbox、优化性能、react hooks、浏览器渲染过程、浏览器的缓存机制、浏览器的垃圾回收机制 本轮共 11 道题。答案默认折叠,便于先自行作答。 1. 讲一下可视化搭建平台中魔方组件的设计与实现难点 题目要点 略 参考答案 略 2. 如何解决多模块叠加时的z-index管理问题 题目要点 z-index 基于层叠上下文,简单数字不能保证全局一致性 建立统一 z-index 管理系统(如 Z_INDEX_MAP)是可维护的关键 模块内部创建局部 stacking context,避免全局冲突 动态模块如拖拽、浮层应使用自动 z-index 分配策略 避免滥用 z-index,建议结合 portal、绝对定位和容器设计实现可控叠加 参考答案 考察点 面试官想了解你在复杂 UI 组件系统中的图层管理策略 探查你对 z-index 的工作机制、层级上下文(stacking context)的理解 是否具备系统化组织多模块图层关系的经验,能避免冲突和错乱 参考答案 一、z-index 背后机制与问题本质 1. z-index 的作用机制 z-index 定义元素在“同一层叠上下文(stacking context)”中的前后顺序 层叠上下文由具有特定属性的元素(如position: relative/absolute/fixed + z-index)创建 每个层叠上下文是独立的,只影响自身子元素的层叠关系 2. 可视化搭建系统的典型挑战 多模块(如弹窗、悬浮面板、组件拖拽层、选中态)频繁叠加,若统一用裸 z-index 数字管理,非常容易: 维护混乱 层级冲突(某组件盖住了弹窗) 模块互相影响,难以解耦 二、系统化的 z-index 管理方案 1. 建立统一的层级管理规范(z-index Map) 在系统中定义一套统一的 z-index 枚举表,例如: export const Z_INDEX_MAP = { base: 0, component: 10, floatingPanel: 100, modal: 1000, tooltip: 2000, dragLayer: 3000, globalMask: 9999, }; 所有模块只能从该映射中引用 z-index,禁止硬编码数字,避免冲突 2. 模块隔离,建立明确的层叠上下文边界 使用 position: relative/absolute + z-index,每个模块在其容器内控制层级 避免所有元素在一个全局层叠上下文中争夺 z-index 3. 动态 z-index 分配机制(如拖拽时临时置顶) 为拖拽、临时弹出等模块动态分配最高层级,例如: let dynamicZIndex = Z_INDEX_MAP.dragLayer; function getNextZIndex() { return dynamicZIndex++; } 使多个拖拽元素在交互中可动态置顶,不影响整体秩序 4. 可视化调试工具辅助 引入 DevTool 插件或内嵌 z-index 层级可视化辅助组件,用不同颜色或 label 显示当前模块层级,便于调试 三、z-index 冲突的实际案例与应对策略 问题:浮层 A(z-index: 200)被浮层 B(z-index: 100)遮挡 ...

July 28, 2025

美团-本地商业-校招 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: 本次面试主要聚焦于前端中高级技术深度和实际项目经验的考察。重点涵盖了前端工程化与性能优化(如Webpack优化、首屏加载、HTTP缓存、CDN等)、JavaScript运行机制与高级特性(事件循环、宏微任务、Vue 2/3响应式原理、数组操作等),以及Web安全与系统设计(如XSS防御、HTTPS原理、持久化登录系统设计)。此外,还深入探讨了跨平台开发(Uni-App/Taro原理及选型)和微前端架构的关键考量点。面试官旨在通过这些题目,全面评估候选人在复杂业务场景下的技术选型、问题分析与解决能力,以及对前端底层原理和安全实践的掌握程度。 本轮共 18 道题。答案默认折叠,便于先自行作答。 1. 简单介绍你的技术背景和项目经验。 题目要点 说明:该题是典型的主观型问题,没有唯一的标准答案。 考察目标:面试官主要考察答题者的自我认知、表达能力、技术广度与深度、以及对自身项目经验的复盘和总结能力。 答题结构建议:建议围绕"我是谁"、“我会什么”、“我做过什么"三个核心点展开,并结合具体项目经验突出个人优势和亮点。 参考答案 很高兴能有机会介绍一下我的技术背景和项目经验。我叫[你的名字],毕业于[你的学校和专业],在校期间我对前端技术产生了浓厚兴趣,系统学习了HTML、CSS和JavaScript基础。毕业后,我加入了[你的公司名称],至今有[X]年的前端开发经验。 在职业生涯中,我主要专注于[你的主要技术方向,如Web应用开发、跨平台开发、前端性能优化等]。我熟练掌握Vue.js(或React)框架及其生态系统,包括状态管理(Vuex/Pinia或Redux/MobX)、路由管理(Vue Router或React Router)和构建工具(Webpack/Vite)。同时,我对Node.js也有一定了解,能够进行一些基础的后端协作或独立开发前端工具。 在[公司名称],我参与了[项目名称,可以是核心项目或最有代表性的项目]的开发工作。这个项目是一个[简单描述项目类型,如中后台管理系统、电商平台、数据可视化平台]。我在其中主要负责[具体职责,如负责XX模块的开发、实现YY功能、进行ZZ性能优化]等。 举个例子,在[具体项目或模块]中,我们遇到了[一个具体的技术挑战,如首屏加载慢、组件复用性差、跨端适配问题]。为了解决这个问题,我当时[你采取的具体措施和方案,如引入了Webpack的SplitChunksPlugin进行代码分割、设计了通用组件库并结合Slots/Props实现高复用、使用了Uni-App的条件编译处理平台差异]。最终,[达到的效果和数据,如首屏加载时间从5s优化到1s、组件复用率提升了30%、成功支持了微信和支付宝小程序]。这次经历让我深刻理解了[你的收获和思考,如前端性能优化的重要性、组件化设计的价值、跨平台开发的权衡点]。 我不仅关注代码实现,也注重项目的整体质量和用户体验,善于发现问题并积极寻求解决方案。我也乐于学习和探索新技术,保持对前端前沿的关注。谢谢。 2. 项目中遇到的性能优化挑战是什么?具体如何解决的? 题目要点 说明:该题是典型的主观型问题,没有唯一的标准答案。 考察目标:面试官主要考察答题者在实际项目中发现、分析和解决性能问题的能力,包括对性能指标的理解、优化策略的掌握以及实际操作经验和复盘能力。 答题结构建议:建议按照"背景/挑战 -> 如何分析 -> 具体优化措施 -> 优化效果与思考"的结构展开,突出解决问题的思路和细节。 参考答案 在[你的项目名称,如电商H5页面/管理后台]项目中,我们曾面临一个比较明显的性能挑战,主要体现在**[具体场景,如首页首屏加载时间过长,达到了5秒以上;或者某个复杂列表页在滚动时出现卡顿]**。这严重影响了用户体验,尤其是在移动网络环境下,导致用户跳出率较高。 为了定位问题,我们首先借助了Chrome DevTools (Lighthouse、Performance面板) 进行分析。通过对加载瀑布流、CPU使用率和内存占用进行观察,我们发现主要瓶颈在于: [具体瓶颈1,如:主JS包体积过大,导致解析和执行时间长]。 [具体瓶颈2,如:图片资源未优化,大量高清大图直接加载,占用带宽]。 [具体瓶颈3,如:复杂组件渲染耗时,导致回流重绘频繁,引起卡顿]。 针对这些问题,我们采取了以下具体的优化措施: 代码分割与按需加载:针对主JS包体积过大的问题,我们引入了Webpack的SplitChunksPlugin,结合路由懒加载(或组件懒加载)。将不同路由页面的代码和不常用的第三方库进行拆分,例如:component: () => import('./views/OrderDetail.vue')。这样,用户首次访问时只需要加载当前页面的核心代码,显著减少了首屏JS的下载和解析量。 图片优化:对于图片资源,我们采取了多项措施: 图片压缩:对项目中的所有图片资源进行了统一的无损压缩处理,并推荐设计师使用WebP格式的图片。 懒加载:对于首屏之外的图片,我们实现了图片懒加载,只有当图片进入用户视口时才进行加载,避免了不必要的资源请求。 CDN加速:将静态图片资源部署到CDN,利用CDN的边缘节点分发,减少了网络延迟。 组件渲染优化:针对复杂组件的卡顿问题,我们做了以下工作: 虚拟列表/长列表优化:对于数据量大的列表页,我们引入了虚拟列表技术,只渲染可视区域内的DOM节点,减少了DOM数量,大幅提升了滚动流畅度。 避免不必要的渲染:在Vue/React组件中,合理使用v-if/v-show、keep-alive、React.memo/PureComponent等,结合shouldComponentUpdate(React)或计算属性/监听器(Vue)来避免组件的重复渲染。 减少回流重绘:优化了DOM操作,减少了频繁读写布局属性,例如将多个样式修改合并为一次操作,或者使用CSS的transform代替left/top进行动画。 经过这些优化,我们的**[项目名称]首页首屏加载时间成功从5秒降低到了2秒以内**(或更具体的数据),用户反馈页面的流畅度也有了显著提升,这对业务转化率带来了积极影响。这次优化经历让我对前端性能优化有了更系统和深入的理解,也认识到性能优化是一个持续的过程,需要贯穿于项目的整个生命周期中。我们会定期进行性能监控和分析,确保用户体验。谢谢。 3. 如果让你主导一个跨平台电商项目,如何选择技术栈? 题目要点 技术栈选型能力:面试官想考察候选人是否具备从宏观层面规划项目技术栈的能力,包括对主流前端框架、跨平台技术以及相关生态的了解。 对跨平台开发的深入理解:考察候选人是否清楚跨平台开发的核心痛点(如性能、体验、API兼容性),并能提出针对性的解决方案。 系统设计和权衡能力:评估候选人能否在性能、开发效率、维护成本、团队能力、业务需求等多个维度之间进行权衡和取舍。 对电商领域特点的认知:了解候选人是否对电商项目特有的需求(如商品展示、购物车、支付、大促活动)有前瞻性思考,并能在技术选型中体现。 参考答案 1.1 原理说明 跨平台电商项目通常是指一个产品需要同时在Web(H5)、微信小程序、支付宝小程序、App(iOS/Android)等多个终端运行,并且希望尽可能复用代码,降低开发和维护成本。技术栈选择是一个复杂的决策过程,需要综合考虑项目的业务需求、性能要求、开发效率、团队技术栈、维护成本以及社区生态等多方面因素。 ...

July 28, 2025

滴滴-社招-2年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: 生命周期、Vue3 API、响应式原理、v-for、事件循环 本轮共 21 道题。答案默认折叠,便于先自行作答。 1. 为什么使用 而非 题目要点 <header>是HTML5语义化标签,明确头部区域含义 语义化标签有助于SEO和辅助技术识别 提高代码可读性和维护性,减少依赖类名赋予语义 推荐优先使用语义标签代替无语义的<div>+类名组合 参考答案 考察点 理解HTML语义化标签的重要性及作用 掌握语义化标签对SEO和无障碍的影响 了解语义化标签在开发协作和维护中的优势 参考答案 一、语义化标签的核心概念 HTML5引入了如 <header>、<nav>、<article>、<footer> 等语义化标签,明确表达页面结构和内容含义 语义化标签比普通 <div> 搭配类名更具意义,利于浏览器、搜索引擎、辅助设备等理解页面 二、使用 <header> 的优势 明确语义 <header>表示页面或区块的头部区域,包含标题、导航等信息 比 <div class="header"> 直接通过类名赋予语义更标准、易识别 提升可访问性 语义化标签被屏幕阅读器等辅助技术识别,帮助视障用户理解页面结构 <header>使辅助设备快速定位页眉内容,提升用户体验 SEO友好 搜索引擎利用语义标签准确抓取页面结构和重点内容 语义标签利于内容分类和权重判断,可能提高搜索排名 代码规范与维护 语义化标签增强代码自解释性,方便团队协作和代码维护 减少对类名、ID等非结构性属性的依赖,代码更简洁清晰 三、使用场景对比 <header>适合定义页面或区块的头部区域 <div class="header">仅作为普通容器,没有内置语义 两者均可通过CSS样式控制外观,但语义化标签具备结构语义 2. SEO和可访问性有何影响 题目要点 语义化标签提升SEO抓取效率和内容权重分配 结构化页面内容,增强搜索引擎对重点信息的识别能力 语义标签是辅助技术识别页面结构的关键,提升可访问性 有助于残障用户快速导航和理解页面 符合无障碍标准,降低法律和合规风险 参考答案 考察点 理解SEO(搜索引擎优化)对网页结构和内容的重要性 掌握语义化标签对搜索引擎抓取的正面影响 了解可访问性(Accessibility)概念及辅助技术如何利用语义标签 能说明如何通过结构优化提升用户体验及业务价值 参考答案 一、SEO影响 语义化标签助力搜索引擎理解页面结构 ...

July 28, 2025