安顺市网站建设_网站建设公司_前端工程师_seo优化

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

一、数组合并方法

常用方法：

• concat()

• for循环

• 扩展运算符（...）

• push.apply()

二、对象合并方法

常用方法：

• Object.assign()

• 扩展运算符（...）

• 手写深浅拷贝

三、TypeScript中interface与type的区别

核心区别：

1. 继承与实现：interface可以通过extends或implements被命名使用，而对象字面量的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. 复盘总结：每次面试后反思改进