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

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

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

text-align + line-height实现单行文本水平垂直居中
- 适用于单行文本元素，通过text-align: center实现水平居中，line-height等于容器高度实现垂直居中
text-align + vertical-align
- 结合父元素的text-align: center和子元素的vertical-align: middle实现居中效果
margin: 0 auto
- 主要用于实现水平居中，配合其他方法可实现垂直居中
flex布局
- 父元素设置display: flex; justify-content: center; align-items: center，简单高效
position定位
- 父元素相对定位，子元素绝对定位，结合top: 50%; left: 50%; transform: translate(-50%, -50%)

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

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

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

三十三. CSS选择器类型

标签选择器：通过HTML标签名选择元素，如p { color: red; }
类选择器：通过元素的class属性选择，如.active { background: blue; }
ID选择器：通过元素的id属性选择，如#header { height: 100px; }
包含选择器：选择特定父元素下的子元素，如div p { margin: 10px; }
通配选择器：匹配所有元素，如* { box-sizing: border-box; }
分组选择器：同时选择多个选择器，如h1, h2, h3 { font-weight: normal; }
属性选择器：根据元素属性选择，如input[type="text"] { width: 200px; }
伪类选择器：选择元素的特定状态，如a:hover { color: green; }
伪元素选择器：选择元素的特定部分，如p::first-letter { font-size: 2em; }
相邻兄弟选择器：选择紧邻的兄弟元素，如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属性和索引，但没有数组的方法，转换为标准数组的方法：

Array.prototype.slice.call()

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

Array.from()（ES6）
```
const arr = Array.from(arrayLike);
```
扩展运算符（ES6）
```
const arr = [...arrayLike];
```

三十七. 事件种类

鼠标事件：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout等
键盘事件：keydown, keyup, keypress
表单事件：submit, reset, change, input, focus, blur
文档/窗口事件：load, unload, resize, scroll, DOMContentLoaded
触摸事件：touchstart, touchmove, touchend（移动设备）
拖放事件：drag, dragstart, dragend, dragover, drop
进度事件：loadstart, progress, load, abort, error, loadend

三十八. jQuery选择器

ID选择器：$("#myId") - 选择id为myId的元素
类选择器：$(“.myClass”) - 选择所有class为myClass的元素
元素选择器：$(“div”) - 选择所有div元素
属性选择器：$(“input[type=‘text’]”) - 选择所有type为text的input元素
后代选择器：$(“ul li”) - 选择ul下的所有li元素
子元素选择器：$(“ul > li”) - 选择ul的直接子元素li
相邻兄弟选择器：$(“div + p”) - 选择div后面紧邻的p元素
通配选择器：$(“*”) - 选择所有元素

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

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

基本概念：
- 通过不同的URL路径，展示不同的组件内容
- 无需刷新页面，通过JavaScript动态切换组件
- 保持页面状态，提升用户体验
Vue Router：
- 配置路由映射关系：路径 -> 组件
- 使用<router-link>实现导航，<router-view>展示组件
- 支持嵌套路由、动态路由、路由守卫等功能
React Router：
- 基于组件的路由实现
- 使用<Route>定义路由规则，<Link>实现导航
- 支持声明式和编程式导航
核心作用：
- 实现无刷新页面切换
- 提供浏览器历史记录管理
- 支持路由参数传递
- 实现权限控制和导航守卫

四十. 实现对象浅拷贝

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

Object.assign()

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

扩展运算符
```
const copy = {
     
     
```

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