【初级】前端开发工程师面试100题（二）

置顶

全栈老李技术面试

已于 2025-04-25 08:53:07 修改

阅读量1.6k

点赞数 58

分类专栏：前端面试题文章标签：面试职场和发展 javascript html5 css react.js 前端

于 2025-04-23 13:01:15 首次发布

本文链接：https://blog.csdn.net/liuyun_12138/article/details/147447518

版权

本题库共计包含100题，考察html，css，js，以及react，vue，webpack等基础知识掌握情况。

【初级】前端开发工程师面试100题（一）
【初级】前端开发工程师面试100题（二）
【初级】前端开发工程师的面试100题（速记版）

TypeScript篇

TypeScript和JavaScript有什么区别？
- TS是JS的超集，添加了静态类型系统，编译时检查类型错误，适合大型项目。
interface和type有什么区别？
- interface主要用于描述对象形状，可extends和implements；type更灵活，可用于联合类型、元组等。
```
interface User {
     
  name: string;
  age: number;
}

type ID = string | number;
```
什么是泛型？有什么作用？
- 泛型让组件支持多种类型，提高复用性。比如一个函数可以处理不同类型的数组。
```
function identity<T>(arg: T): T {
     
  return arg;
}
identity<string>("hello");
```
TypeScript中的never类型是什么？
- 表示永远不会发生的值，如抛出错误的函数返回类型或无限循环。
```
function error(message: string): never {
     
  throw new Error(message);
}
```
如何为第三方库添加类型声明？
- 使用declare声明或安装@types/库名的类型包。也可以自己写.d.ts声明文件。

移动端开发篇

移动端适配有哪些方案？
- 媒体查询、rem/vw单位、flex布局、响应式框架(如Bootstrap)、1px边框问题处理。
如何处理移动端300ms点击延迟？
- 使用fastclick库、viewport设置width=device-width、CSS的touch-action: manipulation。
什么是Flex布局？常用属性有哪些？
- 弹性布局，适合一维布局。常用：display: flex、flex-direction、justify-content、align-items。
如何实现移动端下拉刷新和上拉加载？
- 原生scroll事件判断滚动位置、第三方库(pull-to-refresh)、IntersectionObserver API。
什么是PWA？有哪些特性？
- 渐进式Web应用，特性：离线可用(Service Worker)、添加到主屏、推送通知等。

测试与部署篇

前端单元测试有哪些框架？
- Jest(全能)、Mocha+Chai(灵活)、Vue Test Utils、React Testing Library。

如何测试React组件？

渲染测试(组件能否正常渲染)、交互测试(点击等事件)、快照测试(UI是否意外改变)。

test('renders button with text', () => {
     
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

什么是E2E测试？有哪些工具？
- 端到端测试，模拟用户操作。工具：Cypress、Playwright、Puppeteer。
前端项目部署流程是怎样的？
- 代码打包 → 上传到服务器/CDN → 配置Nginx → 配置HTTPS → 配置CI/CD自动化。
如何实现灰度发布？
- 通过Nginx按比例分流、Cookie或Header标识测试用户、AB测试平台控制。

数据结构与算法篇

常见的数据结构有哪些？
- 数组、栈、队列、链表、树(二叉树)、图、哈希表等。

实现一个深拷贝函数

function deepClone(obj) {
     
  if (typeof obj !== 'object' || obj === null) return obj;
  const result = Array.isArray(obj) ? [] : {
     };
  for (let key in obj) {
     
    if (obj.hasOwnProperty(key)) {
     
      result[key] = deepClone(obj[key]);
    }
  }
  return result;
}

手写Promise.all

Promise.all = function(promises) {
     
  return new Promise(

最低0.47元/天解锁文章