news 2026/4/16 14:11:43

万字详解:蚂蚁、字节前端面试全记录

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
万字详解:蚂蚁、字节前端面试全记录

第一部分:基础技术面试题

一、数组合并方法

常用方法:

  • concat()

  • for循环

  • 扩展运算符(...

  • push.apply()

二、对象合并方法

常用方法:

  • Object.assign()

  • 扩展运算符(...

  • 手写深浅拷贝

三、TypeScript中interface与type的区别

核心区别:

  1. 继承与实现:interface可以通过extendsimplements被命名使用,而对象字面量的type别名不能

  2. 声明合并:interface支持多个声明合并,对象字面量的type别名不支持

  3. 扩展性:type可以使用联合类型、元组等更复杂的类型定义

官方建议:优先查看TypeScript官网文档

四、CSS Flex布局

flex: 0 1 auto的含义:

  • 这是flex属性的简写形式

  • 语法flex: <flex-grow> <flex-shrink> <flex-basis>

  • 具体值

    • 0:flex-grow(放大比例),不放大

    • 1:flex-shrink(缩小比例),空间不足时等比缩小

    • auto:flex-basis,基于内容自动计算尺寸

  • 注意:这是弹性盒子的默认值

五、算法题:最长公共前缀

题目:

javascript

输入: ["flower","flow","flight"] 输出: "fl"

解法思路:

  1. 找出数组中的最小字符串和最大字符串

  2. 这两个字符串的最长公共前缀就是整个数组的公共前缀

代码实现:

javascript

var longestCommonPrefix = function(strs) { if (strs === null || strs.length === 0) return ""; if (strs.length === 1) return strs[0]; let min = 0, max = 0; for (let i = 1; i < strs.length; i++) { if (strs[min] > strs[i]) min = i; if (strs[max] < strs[i]) max = i; } for (let j = 0; j < strs[min].length; j++) { if (strs[min].charAt(j) !== strs[max].charAt(j)) { return strs[min].substring(0, j); } } return strs[min]; };

六、手写Koa的compose方法

简化版实现:

javascript

function compose(middleware) { return function() { return dispatch(0); function dispatch(i) { let fn = middleware[i]; if (!fn) return; return fn(function next() { return dispatch(i + 1); }); } }; }

异步处理:如需支持异步,dispatch函数中返回Promise即可

七、获取高精度时间

浏览器环境:

javascript

performance.now(); // 返回从performance.timing.navigationStart到当前的微秒数

Node.js环境:

javascript

process.hrtime(); // 返回[秒, 纳秒]数组

八、获取首屏时间

H5页面:

  • 有图片:首屏时间 = 首屏图片全部加载完毕的时刻 -performance.timing.navigationStart

  • 无图片:首屏时间 =performance.timing.domContentLoadedEventStart-performance.timing.navigationStart

小程序:通过拦截setData调用方式计算

九、Git操作:rebase vs merge

核心区别:

  • rebase:变基,重写提交历史,保持线性、整洁的历史树

  • merge:合并,保留分支的commit提交节点,产生合并提交


第二部分:蚂蚁金服面试(4轮技术+1轮HR)

一面:简历评估面

面试要点:

  1. Node.js经验

    • 项目架构、数据库(MySQL + Redis)

    • 部署、监控方案

  2. 大型项目管理

    • Git协作流程

    • 技术栈选型考虑因素

    • 团队规范制定(脚手架、Lint等)

  3. 技术工具

    • TSLint与ESLint区别(TS现已推荐使用ESLint)

    • TypeScript实践经验

  4. 开源框架

    • 原理理解:Koa、Axios、Vue、React、Taro

    • 开源贡献经验

  5. 性能监控SDK

    • 架构设计、难点解决

    • 异常监控、网络请求、加载时间实现原理

  6. 业务场景

    • 灰度发布实现

    • 数据收集、Web搭建理解

    • SDK缓存优化

二面:技术深度面

小程序相关:

  1. 小程序架构

    • 容器、渲染引擎、JavaScript引擎

    • View层(WebView)与JS层分离

    • 通信机制:MessageChannel

  2. 框架对比

    • Taro、uni-app、kbone、WePY、mpvue

    • Taro限制:React语法支持有限

  3. 编译原理

    • JSX转小程序代码过程

    • Babel AST转换

技术细节:

  1. npm版本管理

    bash

    ^1.2.1 # >=1.2.1 && <2.0.0 ^0.2.1 # >=0.2.1 && <0.3.0 ~1.5.1 # >=1.5.1 && <1.6.0
  2. Beta版本发布

    bash

    npm publish --tag beta
  3. 埋点系统

    • 上报方案:Ajax、img、script

    • 图片方案优势:跨域友好、不阻塞

    • 数据模板设计

    • 曝光埋点实现

三面、四面:综合能力面

考察重点:

  1. 项目亮点:突出技术优势

  2. 问题反思:从失败中学习的经验

  3. 技术规划:个人成长路径

  4. 团队协作:优缺点自我认知

  5. 抗压能力:高强度工作应对

HR面:终面

关键问题:

  1. 职业发展

    • 换工作原因

    • 未来规划

    • 工作机会优先级(公司、团队、技术、薪资)

  2. 工作表现

    • 过往绩效

    • 团队定位

    • 成长经历

  3. 个人特质

    • 压力应对方式

    • 生活工作挑战


第三部分:字节跳动面试(3轮技术+1轮HR)

一面:技术基础+编程

CSS Flex题目:

html

<div class="container"> <div class="left"></div> <div class="right"></div> </div> <style> * { padding: 0; margin: 0; } .container { width: 600px; height: 300px; display: flex; } .left { flex: 1 2 500px; background: red; } .right { flex: 2 1 400px; background: blue; } </style>

计算思路:根据容器宽度和flex属性计算实际分配空间

异步编程题:

javascript

const list = [1, 2, 3]; const square = num => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(num * num); }, 1000); }); }; // 改造前(同时输出) async function test() { list.forEach(async x => { const res = await square(x); console.log(res); }); } // 改造后(间隔1秒输出) async function testFixed() { for (let x of list) { const res = await square(x); console.log(res); } }

并发控制函数:

javascript

function multiRequest(urls, maxNum) { // 实现要点: // 1. 控制最大并发数 // 2. 请求返回后补充新请求 // 3. 保持结果顺序 }

二面:技术原理深度

原型链问题:

javascript

Object instanceof Function; // true Function instanceof Object; // true Object instanceof Object; // true Function instanceof Function; // true

深拷贝实现要点:

  1. 基本类型直接返回

  2. 引用类型递归复制

  3. 处理循环引用

  4. 特殊对象类型(Date、RegExp等)

  5. 正则表达式深拷贝

Array.prototype.splice模拟实现:

  • 参数处理:start、deleteCount、...items

  • 数组长度调整

  • 元素删除与插入

  • 返回被删除元素数组


第四部分:面试准备建议

一、技术准备重点

  1. 基础扎实

    • JavaScript核心概念(闭包、原型、异步)

    • CSS布局(Flex、Grid)

    • 数据结构和算法

  2. 框架原理

    • 至少精通一个主流框架

    • 理解其设计思想和实现原理

  3. 工程化能力

    • 构建工具、性能优化

    • 代码规范、团队协作

  4. 项目经验

    • 能清晰阐述项目架构

    • 突出技术难点和解决方案

二、公司特点分析

蚂蚁金服:

  • 重视Node.js全栈能力

  • 关注大型项目管理经验

  • 技术深度要求高

  • HR面有否决权

字节跳动:

  • 算法和编程能力要求高

  • 框架原理理解深入

  • 技术广度重要

  • 前两面难度最大

三、面试策略

  1. 简历准备

    • 每项技能都有实际案例支撑

    • 量化项目成果

  2. 知识体系

    • 建立完整的知识图谱

    • 准备常见问题的深度解析

  3. 沟通表达

    • 技术问题条理清晰

    • 项目经验故事化讲述

  4. 心态调整

    • 视面试为技术交流

    • 从失败中学习改进


第五部分:推荐学习资源

在线题库:

  • 前端100问 - Daily-Interview-Question

  • JavaScript算法 - JavaScript-Algorithms

深度文章:

  1. 深入探究Function & Object鸡蛋问题

  2. 如何实现一个深拷贝

  3. Lodash深拷贝实现原理

扩展阅读:

  1. TypeScript官方文档

  2. Flex布局MDN文档

  3. Git官方文档


总结

面试不仅是技术能力的考察,更是综合素质的展现。建议:

  1. 持续学习:技术更新快,保持学习状态

  2. 深度思考:不只停留在使用层面,理解原理

  3. 实践积累:通过实际项目锻炼能力

  4. 复盘总结:每次面试后反思改进

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/16 9:02:35

(5/10)电子技术-杂七杂八

较宽的线有更大的对地电容&#xff0c;可能影响高频响应。“EMC/EMI&#xff1a;设计时费1分力&#xff0c;整改时省10分力”沙盒总结一下&#xff1a;沙盒就是计算机世界的“安全试车场”和“隔离病房”。它通过“限制能力”和“隔离空间”来换取系统的整体安全与稳定&#xf…

作者头像 李华
网站建设 2026/4/15 19:53:39

Degrees of Lewdity中文汉化终极指南:快速解决兼容性问题

Degrees of Lewdity中文汉化终极指南&#xff1a;快速解决兼容性问题 【免费下载链接】Degrees-of-Lewdity-Chinese-Localization Degrees of Lewdity 游戏的授权中文社区本地化版本 项目地址: https://gitcode.com/gh_mirrors/de/Degrees-of-Lewdity-Chinese-Localization …

作者头像 李华
网站建设 2026/4/16 9:05:02

语音质检自动化:基于FSMN-VAD的企业应用案例

语音质检自动化&#xff1a;基于FSMN-VAD的企业应用案例 1. 引言&#xff1a;离线语音端点检测的工程价值 在企业级语音处理系统中&#xff0c;如何高效地从长音频中提取有效语音片段、剔除静音与噪声干扰&#xff0c;是提升后续语音识别&#xff08;ASR&#xff09;、情感分…

作者头像 李华
网站建设 2026/4/15 14:44:44

PaddlePaddle-v3.3参数调优:学习率调度策略效果对比分析

PaddlePaddle-v3.3参数调优&#xff1a;学习率调度策略效果对比分析 1. 引言 1.1 技术背景与选型动机 PaddlePaddle是由百度自主研发的深度学习平台&#xff0c;自2016年开源以来&#xff0c;已广泛应用于工业界和学术研究。作为一个全面的深度学习生态系统&#xff0c;Padd…

作者头像 李华
网站建设 2026/4/16 9:06:53

一键启动Qwen1.5-0.5B-Chat:开箱即用的AI对话服务

一键启动Qwen1.5-0.5B-Chat&#xff1a;开箱即用的AI对话服务 1. 引言 随着大语言模型技术的快速发展&#xff0c;轻量化、低成本部署成为开发者和企业关注的核心需求。在众多开源模型中&#xff0c;阿里通义千问系列凭借其高性能与灵活适配能力脱颖而出。其中&#xff0c;Qw…

作者头像 李华
网站建设 2026/4/16 9:09:35

Qwen-Image-2512-ComfyUI部署指南:NVIDIA驱动兼容性测试

Qwen-Image-2512-ComfyUI部署指南&#xff1a;NVIDIA驱动兼容性测试 1. 引言 1.1 学习目标 本文旨在为AI开发者和图像生成技术爱好者提供一份完整的 Qwen-Image-2512-ComfyUI 部署实践指南。通过本教程&#xff0c;您将掌握&#xff1a; 如何在单张NVIDIA显卡&#xff08;如…

作者头像 李华