【前端面试题】前端面试知识点（第三十一题到第六十一题）

三十一. CSS实现垂直水平居中

实现元素的垂直水平居中是前端开发中的常见需求，主要有以下几种思路：

1. text-align + line-height实现单行文本水平垂直居中

   • 适用于单行文本元素，通过text-align: center实现水平居中，line-height等于容器高度实现垂直居中

2. text-align + vertical-align

   • 结合父元素的text-align: center和子元素的vertical-align: middle实现居中效果

3. margin: 0 auto

   • 主要用于实现水平居中，配合其他方法可实现垂直居中

4. flex布局

   • 父元素设置display: flex; justify-content: center; align-items: center，简单高效

5. position定位

   • 父元素相对定位，子元素绝对定位，结合top: 50%; left: 50%; transform: translate(-50%, -50%)

三十二. SCSS/LESS与普通CSS的区别

Sass和Less都是CSS预处理器，旨在增强CSS的功能和可维护性，它们与普通CSS的主要区别如下：

1. 功能增强：提供变量、嵌套、混合、继承等特性，使CSS编写更高效
2. 编译环境：
   • Sass最初需要Ruby环境，现在也有其他编译方式，属于服务端处理
   • Less可通过Less.js在浏览器端处理，也可在服务端编译
3. 语法差异：
   • 变量符号不同：Sass使用$，Less使用@
   • Sass支持更复杂的逻辑控制，如条件语句、循环等
4. 文件后缀：Sass文件通常为.scss或.sass，Less文件为.less
5. 输出方式：都需要编译成普通CSS才能被浏览器识别

三十三. CSS选择器类型

1. 标签选择器：通过HTML标签名选择元素，如p { color: red; }

2. 类选择器：通过元素的class属性选择，如.active { background: blue; }

3. ID选择器：通过元素的id属性选择，如#header { height: 100px; }

4. 包含选择器：选择特定父元素下的子元素，如div p { margin: 10px; }

5. 通配选择器：匹配所有元素，如* { box-sizing: border-box; }

6. 分组选择器：同时选择多个选择器，如h1, h2, h3 { font-weight: normal; }

7. 属性选择器：根据元素属性选择，如input[type="text"] { width: 200px; }

8. 伪类选择器：选择元素的特定状态，如a:hover { color: green; }

9. 伪元素选择器：选择元素的特定部分，如p::first-letter { font-size: 2em; }

10. 相邻兄弟选择器：选择紧邻的兄弟元素，如div + p { margin-top: 20px; }

三十四. 同步和异步的区别

• 同步：

  • 代码按照顺序执行，前一个任务完成后才能执行后一个任务
  • 执行过程中会阻塞后续操作
  • 适用于简单的、执行时间短的操作

• 异步：

  • 任务执行不阻塞后续代码的运行
  • 当异步任务完成后，通过回调函数等方式通知并处理结果
  • 执行顺序不确定，由任务完成时间决定
  • 适用于耗时操作，如网络请求、文件读写等

三十五. Promise使用方式

Promise是处理异步操作的一种方案，用于解决回调地狱问题：

// 创建Promise对象
const promise = new Promise((resolve, reject) => {// 执行异步操作setTimeout(() => {try {// 操作成功resolve("操作成功的结果");} catch (error) {// 操作失败reject("操作失败的原因");}}, 1000);
});// 使用Promise
promise.then(result => {console.log("成功:", result);return "继续传递";}).then(data => {console.log("链式调用:", data);}).catch(error => {console.log("失败:", error);}).finally(() => {console.log("无论成功失败都会执行");});

三十六. 类数组转换为标准数组

类数组对象（如arguments、DOM集合）具有数组的length属性和索引，但没有数组的方法，转换为标准数组的方法：

1. Array.prototype.slice.call()

   const arrayLike = { 0: 'a', 1: 'b', length: 2 };
   const arr = Array.prototype.slice.call(arrayLike);
   

2. Array.from()（ES6）

   const arr = Array.from(arrayLike);
   

3. 扩展运算符（ES6）

   const arr = [...arrayLike];
   

三十七. 事件种类

1. 鼠标事件：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout等

2. 键盘事件：keydown, keyup, keypress

3. 表单事件：submit, reset, change, input, focus, blur

4. 文档/窗口事件：load, unload, resize, scroll, DOMContentLoaded

5. 触摸事件：touchstart, touchmove, touchend（移动设备）

6. 拖放事件：drag, dragstart, dragend, dragover, drop

7. 进度事件：loadstart, progress, load, abort, error, loadend

三十八. jQuery选择器

1. ID选择器：$("#myId") - 选择id为myId的元素

2. 类选择器：$(“.myClass”) - 选择所有class为myClass的元素

3. 元素选择器：$(“div”) - 选择所有div元素

4. 属性选择器：$(“input[type=‘text’]”) - 选择所有type为text的input元素

5. 后代选择器：$(“ul li”) - 选择ul下的所有li元素

6. 子元素选择器：$(“ul > li”) - 选择ul的直接子元素li

7. 相邻兄弟选择器：$(“div + p”) - 选择div后面紧邻的p元素

8. 通配选择器：$(“*”) - 选择所有元素

三十九. 框架中的路由理解

路由是前端框架中实现单页应用（SPA）页面跳转的核心机制，主要作用是建立URL与组件之间的映射关系。

• 基本概念：

  • 通过不同的URL路径，展示不同的组件内容
  • 无需刷新页面，通过JavaScript动态切换组件
  • 保持页面状态，提升用户体验

• Vue Router：

  • 配置路由映射关系：路径 -> 组件
  • 使用<router-link>实现导航，<router-view>展示组件
  • 支持嵌套路由、动态路由、路由守卫等功能

• React Router：

  • 基于组件的路由实现
  • 使用<Route>定义路由规则，<Link>实现导航
  • 支持声明式和编程式导航

• 核心作用：

  • 实现无刷新页面切换
  • 提供浏览器历史记录管理
  • 支持路由参数传递
  • 实现权限控制和导航守卫

四十. 实现对象浅拷贝

浅拷贝是指只复制对象的第一层属性，对于嵌套对象只复制引用：

1. Object.assign()

   const obj = { a: 1, b: { c: 2 } };
   const copy = Object.assign({}, obj);
   

2. 扩展运算符

   const copy = {