三十一. 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 = {
暂无评论内容