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

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

TypeScript篇

51. TypeScript和JavaScript有什么区别？

    • TS是JS的超集，添加了静态类型系统，编译时检查类型错误，适合大型项目。

52. interface和type有什么区别？

    • interface主要用于描述对象形状，可extends和implements；type更灵活，可用于联合类型、元组等。

    interface User {name: string;age: number;
    }type ID = string | number;
    

53. 什么是泛型？有什么作用？

    • 泛型让组件支持多种类型，提高复用性。比如一个函数可以处理不同类型的数组。

    function identity<T>(arg: T): T {return arg;
    }
    identity<string>("hello");
    

54. TypeScript中的never类型是什么？

    • 表示永远不会发生的值，如抛出错误的函数返回类型或无限循环。

    function error(message: string): never {throw new Error(message);
    }
    

55. 如何为第三方库添加类型声明？

    • 使用declare声明或安装@types/库名的类型包。也可以自己写.d.ts声明文件。

移动端开发篇

56. 移动端适配有哪些方案？

    • 媒体查询、rem/vw单位、flex布局、响应式框架(如Bootstrap)、1px边框问题处理。

57. 如何处理移动端300ms点击延迟？

    • 使用fastclick库、viewport设置width=device-width、CSS的touch-action: manipulation。

58. 什么是Flex布局？常用属性有哪些？

    • 弹性布局，适合一维布局。常用：display: flex、flex-direction、justify-content、align-items。

59. 如何实现移动端下拉刷新和上拉加载？

    • 原生scroll事件判断滚动位置、第三方库(pull-to-refresh)、IntersectionObserver API。

60. 什么是PWA？有哪些特性？

    • 渐进式Web应用，特性：离线可用(Service Worker)、添加到主屏、推送通知等。

测试与部署篇

61. 前端单元测试有哪些框架？

    • Jest(全能)、Mocha+Chai(灵活)、Vue Test Utils、React Testing Library。

62. 如何测试React组件？

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

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

63. 什么是E2E测试？有哪些工具？

    • 端到端测试，模拟用户操作。工具：Cypress、Playwright、Puppeteer。

64. 前端项目部署流程是怎样的？

    • 代码打包 → 上传到服务器/CDN → 配置Nginx → 配置HTTPS → 配置CI/CD自动化。

65. 如何实现灰度发布？

    • 通过Nginx按比例分流、Cookie或Header标识测试用户、AB测试平台控制。

数据结构与算法篇

66. 常见的数据结构有哪些？

    • 数组、栈、队列、链表、树(二叉树)、图、哈希表等。

67. 实现一个深拷贝函数

    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;
    }
    

68. 手写Promise.all

    Promise.all = function(promises) {return new Promise((resolve, reject) => {