前言
在求职的道路上，每一次面试都是一次宝贵的学习和成长机会。本文将详细记录我在8月11日参加的一次前端开发岗位面试的经历，从面试准备、自我介绍到具体问题解答，希望能为正在求职的朋友们提供一些参考和帮助。
面试准备
面试前的准备工作至关重要。我首先对公司的业务背景进行了深入了解，包括其主要产品、技术栈以及市场定位等。此外，我还回顾了前端开发的基础知识和最新技术动态，确保自己能够从容应对各种技术问题。为了更好地展示自己的能力和经验，我还准备了一份详细的自我介绍模板，以便在面试时能够清晰、流畅地表达自己的优势和职业规划。
自我介绍
面试官您好，非常感谢您给我这次宝贵的面试机会。我叫邓，毕业于xxx大学xxx专业。大学期间，我逐渐明确了职业方向——前端开发，这源于我在校内软件社团的一段经历：当时跟随一位优秀的学长，接触到了“智能前端”这一方向，让我第一次意识到前端不仅仅是页面呈现，更可以结合数据、交互与智能化能力，创造出真正有生命力的产品，也正是从那时起，我决定深耕前端领域。
在学习路径上，我主要通过“学长指导 + 自主学习”相结合的方式，系统性地打下了基础。其中，我通读了《你不知道的JavaScript》系列书籍，深入理解了JS的底层机制，比如作用域、闭包、原型链等，为后续学习现代框架打下了坚实基础。过去一年中，我将学习重心聚焦在现代前端技术栈，尤其是以 React 为核心，深入掌握了 JavaScript（ES6+）、HTML5、CSS3 以及 React 的组件化思想、Hooks、状态管理等核心能力，同时也对 Vue 有一定了解，具备技术对比和快速上手的能力。
除了实践，我也非常注重知识沉淀。我长期活跃在掘金社区，喜欢将学习心得和技术探索整理成文，目前已发布多篇阅读量较高、互动积极的技术文章，这也锻炼了我总结与表达的能力。此外，我始终关注技术前沿，对AI与前端的结合非常感兴趣，比如在项目中尝试使用AI生成代码、辅助调试，或是探索智能表单、自动化交互等场景，真正践行“拥抱AI编程”的理念。
我相信，凭借扎实的技术基础、持续学习的热情，以及对智能前端方向的浓厚兴趣，我能够快速胜任岗位要求。非常荣幸有机会参与今天的面试，如果能加入贵团队，我一定会全力以赴，持续投入学习与实践，与团队共同成长。谢谢！
面试过程
1. 老家哪里
面试官首先问了我的老家在哪里，这是一个轻松的开场问题，旨在缓解紧张气氛。我简单回答了自己的家乡，并简要介绍了家乡的一些特色和文化。
2. 自我介绍
接下来是自我介绍环节，我按照事先准备的模板进行了详细的自我介绍。面试官听得很认真，并在某些部分提出了进一步的问题，比如我对“智能前端”的理解和具体的实践经验等。我尽量用简洁明了的语言回答，同时结合实际案例进行说明。
3. JS == 和 ===
面试官接着问了关于JavaScript中==和===的区别。我解释道，==是类型转换后的比较，而===是严格比较，不会进行类型转换。例如：
console.log(1 == '1'); // true
console.log(1 === '1'); // false
4. var const let
关于var、const和let的区别，我详细解释了它们的作用域和变量提升的特点：
var声明的变量具有函数作用域和全局作用域，存在变量提升现象。let声明的变量具有块级作用域，不存在变量提升，但存在暂时性死区。const声明的常量也具有块级作用域，一旦赋值后不能重新赋值。
5. let 和 const 区别
let和const的主要区别在于const声明的变量不能重新赋值，但可以修改对象的属性。例如：
const obj = { name: 'Alice' };
obj.name = 'Bob'; // 允许修改对象属性
// obj = { name: 'Charlie' }; // 不允许重新赋值，会报错
6. 假如const的存储的对象的属性可以修改吗？
对于这个问题，我解释说，const声明的对象本身不能重新赋值，但其内部属性是可以修改的。这是因为const只是保证引用地址不变，而不是对象内容不变。
7. Object.assign()
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它返回目标对象。例如：
const target = { a: 1 };
const source = { b: 2, c: 3 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2, c: 3 }
8. CSS选择器
关于CSS选择器，我列举了几种常用的类型：
- 标签选择器：
p、div - 类选择器：
.class - ID选择器：
#id - 属性选择器：
[type="text"] - 伪类选择器：
:hover、:focus
9. CSS position有哪些可选项
CSS中的position属性有以下几种可选值：
static：默认值，元素按照正常的文档流进行布局。relative：相对定位，相对于自身原来的位置进行偏移。absolute：绝对定位，相对于最近的非static定位的祖先元素进行定位。fixed：固定定位，相对于浏览器窗口进行定位。sticky：粘性定位，根据滚动位置在相对定位和固定定位之间切换。
10. CSS display有哪些可选项
CSS中的display属性有多种可选值，常见的有：
block：块级元素，独占一行。inline：行内元素，与其他元素在同一行显示。inline-block：行内块级元素，可以设置宽度和高度，但与其他元素在同一行显示。flex：弹性布局。grid：网格布局。none：不显示元素。
11. 什么叫行内元素，什么叫块级元素
行内元素是指与其他元素在同一行显示的元素，如<span>、<a>等。它们不会独占一行，可以设置字体样式和颜色，但不能设置宽度和高度。
块级元素是指独占一行的元素，如<div>、<p>等。它们可以设置宽度和高度，且默认情况下会独占一行。
12. hook有哪些
React Hooks是React 16.8引入的新特性，用于在函数组件中使用状态和其他React特性。常见的Hooks有：
useState：用于添加状态。useEffect：用于执行副作用操作。useContext：用于访问上下文。useReducer：用于复杂的状态逻辑。useCallback：用于缓存函数。useMemo：用于缓存计算结果。useRef：用于创建可变的引用。
13. 你用过哪些hook
在实际项目中，我经常使用useState和useEffect。useState用于管理组件的状态，useEffect用于处理副作用，如数据获取、订阅事件等。此外，我也使用过useContext来简化组件间的数据传递。
14介绍一下你的项目
接下来就是大家自由发挥的时候了，根据自己的项目介绍一下项目的技术栈，亮点和难点等等，如果大家想了解关于我的项目中的一些实现的难点和亮点可以看看这个专栏 bubu智能招聘
15. 反问
面试官还问了我对公司业务的看法和期望。我表示对公司的发展前景充满信心，并表达了希望能够在团队中发挥自己的专长，与团队共同成长的愿望。
16. 薪水
关于薪水问题，我根据自己的经验和市场行情给出了一个合理的期望值，并表示愿意根据公司的实际情况进行协商。这家公司给我开的是200，应该是初创公司，比较急着招人
17. 公司什么业务
最后，面试官简要介绍了公司的业务范围和发展方向，我认真倾听并表示了浓厚的兴趣。
总结
这次面试经历让我受益匪浅，不仅检验了自己的技术水平，也让我更加明确了未来的职业规划。面试过程中，面试官的专业态度和细致提问给我留下了深刻的印象。我相信，只要不断努力学习和积累经验，一定能够在前端开发领域取得更大的成就。
希望我的面试经历能够对大家有所帮助，祝大家在求职路上都能顺利找到理想的工作！
