ArchGrid - 架构知识网格
·
前端技术栈常用面试题
💡
原文中文，约25600字，阅读约需61分钟。
📝
内容提要
本文介绍了前端面试中常见的技术问题，涵盖React和Vue框架的知识，包括防抖与节流、Promise链式调用、变量声明的区别、深拷贝与浅拷贝、闭包、作用域链、原型链、内存泄漏、继承、this对象、执行上下文、事件代理等。此外，还讨论了JavaScript的数字精度问题、函数缓存、组件间通信、单点登录和Web攻击防御等内容，为面试准备提供了丰富的资料。
🎯
关键要点
- 前端面试中常见的技术问题包括React和Vue框架的知识。
- 防抖和节流是优化高频率执行代码的手段，防抖在连续操作结束后执行回调，节流在一定时间内只执行一次。
- Promise链式调用通过在then()中返回新的Promise实现。
- var、let、const的区别在于作用域、变量提升和重复声明的限制。
- 深拷贝与浅拷贝的区别在于内存地址的共享，浅拷贝只复制引用，深拷贝则创建新的对象。
- 闭包是函数与其词法环境的结合，允许内层函数访问外层函数的变量。
- 作用域链决定了变量和函数的可见性，JavaScript遵循词法作用域。
- 原型链是对象继承属性和方法的机制，通过__proto__属性连接。
- 内存泄漏是指不再使用的内存未被释放，导致内存占用增加。
- JavaScript中的继承可以通过原型链、构造函数、组合继承等方式实现。
- this对象的值取决于函数的调用方式，ES6的箭头函数可以固定this指向。
- 执行上下文是JavaScript代码执行环境的抽象，分为全局、函数和eval上下文。
- 事件代理是将事件处理函数委托给父元素，减少内存消耗和提高性能。
- new操作符用于创建实例对象，完成原型链连接和this绑定。
- bind、call、apply用于改变函数的this指向，bind返回一个新函数，call和apply立即执行。
- Proxy用于定义基本操作的自定义行为，属于元编程。
- Generator函数是ES6的异步编程解决方案，返回一个遍历器对象。
- Promise用于处理异步编程，适用于Ajax请求和异步加载资源。
- 尾递归是一种特殊的递归形式，优化了栈空间的使用。
- 函数式编程强调无状态和数据不可变，优点包括更好的状态管理和代码复用。
- JavaScript的数字精度问题主要是浮点数表示的限制，解决方法包括使用第三方库。
- 函数缓存通过闭包和高阶函数实现，常用于优化性能。
- 单点登录（SSO）允许用户一次登录访问多个系统，通常需要认证中心。
- Web攻击防御包括防止XSS、CSRF和SQL注入等常见攻击。
- CSS盒模型由content、padding、border和margin组成。
- Flex布局和Grid布局是现代CSS布局的两种重要方式。
- 回流和重绘是浏览器渲染过程中的两个重要概念，回流涉及布局计算，重绘涉及视觉更新。
- 响应式设计通过媒体查询和相对单位适应不同设备的屏幕尺寸。
- React中的虚拟DOM和Diff算法提高了性能，减少了不必要的DOM操作。
- React组件之间的通信主要通过props、回调函数和context实现。
- 高阶组件和Hooks是React中提高代码复用和逻辑组织的两种方式。
- Vue的双向绑定通过MVVM模式实现，依赖收集和观察者模式是其核心机制。
- Vue 3.x引入了Proxy API和Composition API，优化了性能和代码组织。
❓
延伸问答
前端面试中常见的技术问题有哪些？
前端面试中常见的技术问题包括React和Vue框架的知识，如防抖与节流、Promise链式调用、变量声明的区别、深拷贝与浅拷贝等。
防抖和节流有什么区别？
防抖是在连续操作结束后执行回调，节流是在一定时间内只执行一次。防抖关注最后一次触发，节流关注时间间隔。
如何实现Promise的链式调用？
Promise的链式调用通过在then()中返回新的Promise来实现，可以连续调用多个then()。
var、let和const之间有什么区别？
var存在变量提升和重复声明，let和const不存在变量提升，let允许重复声明，const声明的常量不可改变。
闭包是什么？
闭包是函数与其词法环境的结合，允许内层函数访问外层函数的变量。
什么是事件代理？
事件代理是将事件处理函数委托给父元素，减少内存消耗和提高性能，适合click、keydown等事件。
➡️
