我被问到的常见前端面试问题

2025-06-07

我被问到的常见前端面试问题

我们面试时都会感到恐惧,原因在于招聘流程的不可预测性。公司数量众多,技术问题也层出不穷,试图钻研每一个概念和定义似乎毫无意义。初入职场的新手,在寻找合适机会时,内心的焦虑感会更加强烈。

2021年底从训练营毕业后,我申请了300多个职位,也获得了不少面试机会。这段时间里,我整理了一些作为一名软件工程师在寻找前端相关职位时经常被问到的问题。

1.什么是语义HTML?

HTML 元素的使用,向浏览器和开发者明确其用途。
例如:<form></form>, <table></table>, <footer></footer>——这些元素由其名称定义,而像

不表明其内容。

语义 HTML 定义了文档中的部分。那么你可能会问,这为什么重要呢?

对于开发人员来说,理解这一点至关重要,因为它关系到可访问性,尤其是在处理现有代码时。对于工程师来说,语义 HTML 允许跨应用程序共享和重用数据。这有利于结构化,并有助于搜索引擎理解文档,并根据搜索查询的相关性对其进行评级。

从用户的角度来看,语义 HTML 有助于提高可读性,因为它由语义 HTML 元素划分而成。文档布局的有序性至关重要,尤其对于残障用户而言。使用统一且通用的元素集来定义文档内容,可以最大程度地提高用户的可访问性。

2.JavaScript 中的闭包是什么?

JavaScript 中的闭包允许你从内部函数访问外部函数的作用域。每当创建/初始化函数时,闭包都会被创建。

这个问题看似简单,但为什么会被频繁问到呢?

我个人认为,面试官希望你具备专业术语的基础知识。即使你可能直觉地知道每个函数都存在作用域,面试官也希望你能解释清楚相关概念。你可能每天都接触函数,但你能解释它们是如何/为什么存在的吗?作为一名工程师,培养不断提问的技能至关重要。他们希望看到你始终在学习,而不是盲目地接受现状。

3.img 标签上的 alt 属性是什么?它的用途是什么?

它是网页上图片和视频等媒体的文本描述。当网页无法加载图片或视频时,会显示这些文本描述。屏幕阅读器会访问这些文本描述,为用户提供与图片和视频等同的文本内容。

4.CSS 样式中的 important 是什么意思?

当元素使用 important 属性设置样式时,它会覆盖所有其他样式。这是一个很好的技巧,可以帮助你在指定样式元素时避免重复代码或编写臃肿的代码。掌握这些技巧可以让面试官确信你知道如何编写简洁且可复用的代码。

5.const、var、let有什么区别?

这三个关键字用于定义变量。但它们在范围和数据的用法上存在很大差异。

Const 是记住“常量”的绝佳方式,该关键字不可重新赋值。使用 const 定义变量时,该变量将保持其原始定义不变。这意味着它在代码中出现之前不可访问。它也是块级作用域的。

Var 是一个可以重新分配的关键字,并且只能在创建它的函数内部可用,因此它是函数作用域的。

Let 是一个可以重新赋值的关键字,但它的作用域与 const 类似,属于块级作用域。如果变量不是在函数或块内创建的,则它们属于全局作用域。

6.解释DOM:

DOM 代表文档对象模型,它是一种将 HTML 元素转换为 JavaScript 可以理解并交互的形式的方法。JavaScript 需要理解网页,才能像动态网页一样进行操作、设置样式、执行操作并正常工作。

6a. 从 DOM 获取元素有哪些不同的方法?

  • 通过Id获取元素

  • 通过类名获取元素

  • 通过标签名获取元素

  • 查询选择器

  • querySelectorAll

7.forEach和map有什么区别?

forEach 方法:
- 通过遍历数组的每个元素来执行函数
- 不返回任何内容,返回未定义
- 允许您通过在数组的每个元素上应用回调函数来修改现有数组的值(它会改变原始数组)

map 方法:
- 使用此函数的返回值创建一个新数组
- 通过在源数组的每个元素上应用回调函数来创建一个新数组(不会改变原始数组)
- 返回新数组

两者:对数组的每个元素执行一个函数

外卖小贴士:

-了解语言的基础知识,尽量不要让懒惰阻碍你提出哪怕是最基本的概念的问题,这就是坚实基础的重要性

- 轻松地与他人讨论概念和定义(这将帮助你组织你的想法,并显得清晰简洁)

-结合最后一条建议,与朋友讨论你的代码,这是理解你自己的代码流程和沟通细节的一个很好的练习

-不要害怕查找学习材料并创建自己的学习方法,例如codepen,freecodecamp,udemy,github,文章,抽认卡,笔记等

-要有耐心,如果没有面试经验,我现在所知道的东西是学不到的

对某个问题说你不知道并不是世界末日。

这并不能确定你的知识水平,也不能决定你的面试结果。承认你不知道答案,证明了你不可能无所不知。但更重要的是,它展现了你的脆弱性和学习的开放性。

我在面试中无数次经历过茫然、结巴和说话磕磕巴。但当我接受这些经历,承认自己的紧张时,我就能专注于面试官的反馈。这让我记下自己对技术问题理解了什么,以及哪些地方没理解。

我希望在我求职的过程中,有人能多提醒我这一点。你不可能知道他们会问你什么,也不可能为每种情况都做好准备。所以,无论面试结果如何,你从面试中学到的是如何放下。

学会放手,能让你放下面试中的期待或焦虑。它迫使你从不同的角度审视自己,理解自己所获得的知识,以及从面试经历中获得的洞见。

文章来源:https://dev.to/melguachun/common-frontend-interview-questions-ive-been-asked-7dk
PREV
开始使用 Angular Material 设置 添加内容
NEXT
原始 JavaScript 组件模式