前端面试题

、div相当于整个页面如何垂直水平居中，至少三种方法 

1. 使用 Flexbox 布局

设置父容器的 display 为 flex，再通过 align-items 和 justify-content 属性将子元素进行水平和垂直居中。

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

2.使用绝对定位和 transform 属性

将子元素设置为绝对定位，并使用 top、bottom、left、right 属性将其放置在父容器的中心位置。再使用 transform 属性将子元素向左上角移动50%的距离。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3.使用 Grid 布局

通过将父容器的 display 设置为 grid，再使用 justify-items 和 align-items 属性将子元素进行水平和垂直居中。

.parent {
  display: grid;
  place-items: center;
}

 数组去重的方法，至少三种？

 使用Set数据结构：将数组转换为Set对象，即可去除重复元素，然后再将其转换回数组。例如：[...new Set(array)]
使用filter()和indexOf()方法：使用filter()方法遍历数组并返回一个新数组，其中仅包含第一次出现的元素。在filter()方法的回调函数中，可以使用indexOf()方法来检查当前元素是否已经出现过。例如：array.filter((item, index) => array.indexOf(item) === index)
使用reduce()和includes()方法：使用reduce()方法遍历数组，并将不重复的元素存储在累加器中。在reduce()方法的回调函数中，可以使用includes()方法来检查当前元素是否已经出现过。例如：array.reduce((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], [])
 

什么是hoc，怎么用，好处，真实应用场景有哪些 

HOC（Higher Order Component）是一种在 React 中进行组件复用的技术，通过将一个组件作为参数传递给另一个函数或组件，返回一个新的增强版组件。HOC 可以对现有的 React 组件进行包装，添加新的功能或修改现有的行为，同时还可以使组件代码更具可读性和复用性。

使用 HOC 可以实现以下好处：

1. 代码复用：可以将公共的逻辑抽象为 HOC，避免在多个组件中重复编写相同的代码。

2. 动态生成组件：可以根据不同的需求动态生成不同的组件，提高组件的灵活性和可扩展性。

3. 容器组件与展示组件分离：可以将数据获取等业务逻辑封装在容器组件中，而将展示逻辑封装到展示组件中，使代码更加清晰易懂。

常见的 HOC 应用场景包括但不限于：

1. 条件渲染

2. 认证/授权

3. 数据获取与处理

4. 状态管理

5. 性能优化

6. 路由跳转

7. 日志记录

8. 其他自定义需求

 什么是同步异步，微任务宏任务，分别有哪些 

同步和异步是指程序在执行代码时是否需要等待操作完成。同步操作会阻塞后续代码的执行，直到该操作完成并返回结果，而异步操作则不会阻塞后续代码的执行，而是立即返回一个 Promise 对象或注册回调函数，在操作完成后才会调用该回调函数。

微任务和宏任务则是指程序中的任务队列，用于管理异步操作。微任务包括 Promise 回调函数、process.nextTick 等，而宏任务则包括整体代码（script）、setTimeout、setInterval、I/O 操作等。

常见的同步操作包括赋值、数学运算、循环等，常见的异步操作包括网络请求、定时器等。常见的微任务包括 Promise 回调函数、MutationObserver 回调函数等，常见的宏任务包括 setTimeout、setInterval、requestAnimationFrame、I/O 操作等。

 说说你对 keep-alive的理解，有什么好处，身上有什么属性  

keep-alive是Vue.js中的一个组件，用于缓存其他组件。它可以将不需要销毁的组件缓存起来，下次使用时直接从缓存中读取，省去了重新创建和渲染的时间和开销。

使用keep-alive的好处包括：

提高性能：可以减少组件的创建和销毁次数，提高应用的性能。
优化用户体验：可以缩短页面加载时间，提升用户体验。
简化组件逻辑：可以将缓存和非缓存的逻辑分离，使代码更加清晰。
增强组件的复用性：可以将具有相同状态的组件缓存起来，以便在多个地方重复使用。
keep-alive组件具有以下属性：

include：指定要缓存的组件列表，只有这些组件才会被缓存。
exclude：指定不需要缓存的组件列表，这些组件不会被缓存。
max：指定缓存的组件数量上限，超过上限的组件会被销毁。
provide/inject：允许缓存的子组件访问父组件的数据和方法。
activated/deactivated：在组件被激活和停用时触发的钩子函数，可以用于控制组件的行为。
 

git怎么解决冲突

当在 Git 中进行合并操作时，如果两个不同的分支中有相同的文件被修改了，则会产生冲突。Git 提供了以下步骤来解决这些冲突：

1. 切换到要合并的目标分支，并使用命令 `git merge source_branch` 将源分支合并进入当前分支。

2. 如果发生冲突，可以使用命令 `git status` 查看冲突文件列表，然后逐个打开这些文件，查看 Git 在代码中添加的标记，以确定哪些部分需要保留。

3. 手动解决冲突，删除不需要的代码和标记，并保存修改后的代码。

4. 使用命令 `git add` 将修改后的文件添加到暂存区。

5. 最后，使用命令 `git commit` 提交合并后的代码，并添加一条合适的提交信息。 

如果在解决冲突的过程中遇到困难，可以使用命令 `git mergetool` 来启动一个可视化工具来帮助解决冲突。

 promise api（all,any,race,resolve,reject）

Promise
Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

一个Promise的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected），状态的改变只能是单向的，且变化后不可在改变。

一个Promise必须提供一个 then 方法以访问其当前值、终值和据因。

promise.then(onFulfilled, onRejected)回调函数只能执行一次，且返回 promise 对象

Promise的每个操作返回的都是Promise对象，可支持链式调用。

通过 then 方法执行回调函数，Promise的回调函数是放在事件循环中的微队列。
Promise的具体用法如下：

 

function fn(){
     return new Promise((resolve, reject)=>{
         成功时调用 resolve(数据)
         失败时调用 reject(错误)
     })
 }
 fn().then(success1, fail1).then(success2, fail2)

Promise.all

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.all()全部子实例都成功才算成功，有一个子实例失败就算失败。

Promise.all([promise1, promise2]).then(success1, fail1)
promise1`和`promise2`都成功才会调用`success1

Promise.race

Promise.race()方法也是将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.race()rece是赛跑机制，要看最先的promise子实例是成功还是失败。

Promise.race([promise1, promise2]).then(success1, fail1)
promise1`和`promise2`只要第一个成功就会调用`success1

Promise.any

Promise.any()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.any()有一个子实例成功就算成功，全部子实例失败才算失败。

Promise.race([promise1, promise2]).then(success1, fail1)
promise1`和`promise2`只要有一个成功就会调用`success1

深拷贝和浅拷贝的区别，以及哪些方法能实现深拷贝，哪些方法能实现浅拷贝 

1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

 

 vue里面computed和wacth的区别 ，computed和methds

一、methods、watch

、computed的区别
1.computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用；
2.methods 方法表示一个具体的操作，主要书写业务逻辑；
3.watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；

二、Computed与methods对比

同样都可以达到计算属性的效果
1 . computed是属性调用，而methods是函数调用
2 . computed带有缓存功能，而methods不会被缓存

属性调用：
(1)、computed定义的方法我们是以属性访问的形式调用，{{computedTest}}
(2)、 methods定义的方法，我们必须要加上()来调用，{{methodTest()}}
缓存功能：
计算属性具有缓存：只有当计算属性所依赖的属性发生改变时，才会重新去计算
methods不会被缓存：方法每次都会去重新计算结果。

三、watch

1.watch是观察某一个属性的变化，重新计算属性的值。

2.computed是通过所依赖的属性的变化计算属性值。

3.大部分下watch和computed是没有区别的，但是如果在数据变化的同时进行异步操作的情况下，watch则是最好的选择