面试一
1、怎么让一个div水平垂直居中
<div class="a">
<div class="b"></div>
</div>
//第一种flex 方法
.a{
width:100%;
height:100vh;
display:flex;
justify-content:center; //水平居中
align-items:centerl;//垂直居中
}
.b{
width:100px；
height:100px;
}
• 方法二：Grid (同样推荐)
.a {
width:100%;
height:100vh;
display:grid;
place-items:center; /* 同时实现水平和垂直居中 */
}
.a {
position: relative;
height: 100vh;
}
.b {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用自身宽高的一半进行反向偏移 */
}
2、HTTP的几种请求方法用途
GET: 请求资源，获取资源
POST:提交数据，用于创建新资源或处理数据
PUT: 替换、更新指定资源所有的内容
DELETE:删除指定资源
PATCH:部分更新指定资源
HEAD:类似GET,但只获取响应头
3、Javascript 怎样添加、移除、移动、复制、创建和查找节点
创建：document.createElement('div')
添加 parent.appendChild(child)， parent.insertBefore(newNode, referenceNode)
移除： parent.removeChild(child) 或 child.remove()
• 移动：本质上就是先移除旧位置的节点，再添加到新位置。
• 复制：node.cloneNode(true) // true 为深拷贝，包括子节点
• 查找：
◦ document.getElementById(‘id‘)
◦ document.querySelector(‘.class‘) / document.querySelectorAll(‘p‘)
◦ parent.getElementsByClassName(‘class‘)
4.Js中使用typeof能得到哪些类型,===和==分别在何时使用
• typeof 返回的字符串："number", "string", "boolean", "undefined", "object" (注意：null 和数组也会返回 "object"，这是历史遗留问题), "function", "symbol" (ES6)。
• == (宽松相等) 和 === (严格相等)：
◦ ===：推荐使用。首先比较类型，如果类型不同，直接返回 false。类型相同再比较值。
◦ ==：如果类型不同，会先进行类型转换，然后再比较值。规则复杂，容易产生意料之外的结果（如 0 == false 为 true）。
5. 闭包的写法、作用、缺点
for(var i=0;i<5;i++){
((j)=>{
setTimeout(()=>{
console.log(j)
},10) })(i)
}
作用：使函数外部可以操作函数内部的变量。
缺点：
1. 内存泄漏：因为闭包会长期驻留内存，如果使用不当（例如在不需要的DOM元素上绑定事件处理程序），可能导致内存无法被回收。
6. 描述 Vue 组件生命周期 (以 Vue 2 为主
• 创建阶段：
◦ beforeCreate：实例刚创建，data 和 methods 未初始化。
◦ created：实例创建完成，data 和 methods 已可用，但DOM未生成。
• 挂载阶段：
◦ beforeMount：模板编译完成，但尚未挂载到页面。
◦ mounted：实例已挂载到DOM，可以操作DOM。
• 更新阶段：
◦ beforeUpdate：数据更新时，虚拟DOM重新渲染和打补丁之前。
◦ updated：数据更新后，虚拟DOM重新渲染和打补丁完成。
• 销毁阶段：
◦ beforeDestroy：实例销毁之前，此时实例仍完全可用。适合清除定时器、解绑事件。
◦ destroyed：实例销毁后，所有绑定和监听器被移除
7. computed 有啥特点？computed和watch, methods的区别
• computed (计算属性) 特点:
-
缓存性：最大的特点。只有当其依赖的响应式数据发生改变时，才会重新计算，否则直接返回缓存的结果。
-
声明式：像普通属性一样在模板中声明使用，逻辑清晰。
-
同步操作：必须是同步操作，无法处理异步逻辑。
• 三者的区别:
特性 computed watch methods
缓存 有缓存 无缓存 无缓存
使用场景 当一个值依赖于其他一个或多个响应式数据时 当需要在数据变化时执行副作用（如异步请求、复杂逻辑）时 用于绑定事件或需要每次渲染都重新执行的逻辑
异步支持 不支持 支持 支持（但在模板中直接调用异步方法可能不按预期工作）
返回值 必须返回一个值 不返回值，通常用于执行操作 可以返回任何值，也可以不返回
调用方式 在模板中作为属性调用：{{ computedValue }} 在选项中声明，自动监听 在模板中作为方法调用：@click="methodName"
8. Vuex 中 action 和 mutation 有何区别？
• Mutation (变更):
◦ 职责：是修改 Vuex state 的唯一途径。
◦ 特性：必须是同步函数。这样 Devtools 可以准确地跟踪状态变化，方便调试。
◦ 调用：通过 commit('mutationName', payload) 调用。
• Action (动作):
◦ 职责：处理业务逻辑，可以包含任意异步操作（如 API 请求）。
◦ 特性：不直接修改 state，而是通过提交 mutation 来修改。
◦ 调用：通过 dispatch('actionName', payload) 调用。
简单比喻： Mutation 像是会计，只负责记账（修改state）；Action 像是业务员，可以出去跑业务（异步请求），然后拿回单据让会计记账。
9. ES6 操作数组方法区别: map, filter, reduce, find
• map：遍历数组的每个元素，对其执行提供的函数，并返回一个由函数结果组成的新数组。原数组不变。用于“映射”或“转换”数组。
◦ const doubled = [1, 2, 3].map(x => x * 2); // [2, 4, 6]
• filter：遍历数组，返回一个由满足条件（函数返回true）的元素组成的新数组。用于“过滤”。
◦ const evens = [1, 2, 3, 4].filter(x => x % 2 === 0); // [2, 4]
• reduce：遍历数组，将每个元素执行一个“缩减器”函数，结果汇总为单个返回值。用于“累加”、“扁平化”或任何需要将数组转换为单一值的操作。
◦ const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0); // 6
• find：返回数组中第一个满足所提供测试函数的元素的值。如果没找到，则返回 undefined。
◦ const found = [5, 12, 8, 130].find(num => num > 10); // 12
10. cookies、sessionStorage、localStorage 的区别
特性 cookies sessionStorage localStorage
生命周期 可设置过期时间，否则随浏览器关闭失效 仅限当前会话，关闭标签页或浏览器即失效 永久存储，除非手动清除
存储大小 ~4KB ~5MB ~5MB
与服务器通信 会在每次HTTP请求中自动携带在请求头中，增加流量 不参与服务器通信 不参与服务器通信
API 易用性 原生API较复杂，常用库操作 简单的键值对API（setItem, getItem, removeItem） 同sessionStorage
作用域 在所有同源窗口和标签页中共享 仅在当前浏览器标签页内共享 在所有同源窗口和标签页中共享
