前端面试题：4道必考题，掌握轻松应对

前端

2023-06-24 23:15:28

前端面试挑战：备战必备的 4 道面试题

导言

踏入前端开发世界的旅程总是伴随着不可避免的面试挑战。为了帮助您在面试中脱颖而出，我们精心挑选了四道常见的面试题，涵盖 HTML、CSS、JavaScript、Vue 和 HTTP 请求等关键领域。掌握这些知识点，您将大大提高面试成功率。

1. HTML面试题：div 和 span 的异同

问题：

div 和 span 都是 HTML 中常见的元素，它们有何异同？

答案：

div: div 元素用于创建块级元素，占据整个水平空间，可包含其他元素。
span: span 元素用于创建内联元素，不占据水平空间，只能包含文本或其他内联元素。

代码示例：

<div>
  <p>这是块级元素。</p>
  <span>这是内联元素。</span>
</div>

2. CSS面试题：CSS 选择器类型

问题：

CSS 选择器可用于选择 HTML 元素，有哪些常见的类型？

答案：

元素选择器: 选择特定元素（如 <div> 或 <p>）。
类选择器: 选择具有特定类名的元素（如 .example）。
ID 选择器: 选择具有特定 ID 的元素（如 #example）。
通用选择器: 选择所有元素（如 *）。
后代选择器: 选择父元素的后代元素（如 div p）。
子选择器: 选择父元素的子元素（如 div > p）。
相邻选择器: 选择紧邻在另一个元素之后的元素（如 p + span）。

代码示例：

/* 元素选择器 */
p {
  color: red;
}

/* 类选择器 */
.example {
  background-color: blue;
}

/* ID 选择器 */
#example {
  font-weight: bold;
}

3. JavaScript面试题：数组与对象的区别

问题：

数组和对象是 JavaScript 中常用的数据结构，它们有何区别？

答案：

数组: 有序集合，可存储各种类型的值，通过索引访问元素。
对象: 无序集合，存储键值对，通过键访问值。

代码示例：

// 数组
const numbers = [1, 2, 3];

// 对象
const person = {
  name: "John Doe",
  age: 30,
};

4. Vue面试题：Vue 组件生命周期

问题：

Vue 组件的生命周期有哪些阶段？

答案：

beforeCreate: 实例创建之前调用。
created: 实例创建之后调用。
beforeMount: 模板渲染之前调用。
mounted: 模板渲染之后调用。
beforeUpdate: 数据更新之前调用。
updated: 数据更新之后调用。
beforeDestroy: 实例销毁之前调用。
destroyed: 实例销毁之后调用。

代码示例：

<script>
export default {
  beforeCreate() {
    // ...
  },
  created() {
    // ...
  },
  beforeMount() {
    // ...
  },
  mounted() {
    // ...
  },
  // ...
};
</script>

5. 请求面试题：HTTP 请求方法

问题：

HTTP 请求方法有哪些，每种方法的作用是什么？

答案：

GET: 获取资源。
POST: 创建资源。
PUT: 更新资源。
DELETE: 删除资源。
HEAD: 获取资源元信息，不获取资源本身。
OPTIONS: 查询服务器支持的请求方法。

代码示例：

// GET 请求
fetch('https://example.com/api/users')
  .then(response => response.json())
  .then(data => console.log(data));

// POST 请求
fetch('https://example.com/api/users', {
  method: 'POST',
  body: JSON.stringify({
    name: 'John Doe',
    age: 30,
  }),
})
  .then(response => response.json())
  .then(data => console.log(data));